组合式api

setup

vue3中的一个新的配置项，值是一个函数，setup是所有组合式api的“表演舞台”。组件中用到的数据，方法等都要配置在setup中。setup中的函数的返回值可以是对象（对象中的属性和方法在模板中可以直接使用）/ 渲染函数（可以自定义渲染内容）。

<template>
    <h1>我是App组件,我叫{{name}}</h1>
</template>
 
<script>
export default {
  name: 'App',
  setup(){
    let name='王大头'
    return{
      name
    }
  }
}
</script>
 
    

注意：

1，vue3中还可以向下兼容vue2中设置数据和方法的方式，但是不建议混合使用。
2，在模板中访问从setup返回的ref时，它会自动浅层解包，因此你无须再在模板中为它写.value。当通过this访问时也会同样解包。
3，setup()自身并不含对组件实例的访问权，即在setup()中访问this会是undefined。

补充

setup函数有两个参数：props和context。props是一个对象，包含组件外传进来的，且组件中使用props声明了的属性。context是上下文对象，其中有emit，可以使用context.emit触发自定义事件，context中的slot中存储的是父组件中传入的插槽的值，context中的attrs是一个对象，包含组件外传进来的，但没有在props配置中声明的属性

ref函数

在setup中设置数据时，如果直接设置，那么设置出来的不是响应式的数据，对其进行修改之后页面不会立马作出反应。所以需要使用ref()函数将其变为响应式数据，返回引用实现的实例对象。

<template>
<!-- vue3中不必在写一个最外层的div包裹 -->
<h1>我是App组件,名字是{{name}}，年龄是{{age}},职业是{{work.job}}</h1>
<button @click="change">点击修改年龄名字</button>
</template>
 
<script>
// 引入ref函数
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    // 使用ref()函数将数据变为响应式数据，返回引用实现的实例对象
    let name=ref('lili')
    let age=ref(18)
    let work=ref({
      job:'student',
      place:"China"
    })
    function change(){
      // 修改数据时，使用.value修改
      name.value='王大头'
      age.value=30
      work.value.job='搬砖人'
    }
    return{
      name,
      age,
      work,
      change
    }
  }
}
</script>
 
<style>
</style>

注意

1，ref()接收的数据可以是基本类型，也可以是对象类型(不过，😁听说后期给这个玩意buff了，更高效快速)
2，对于对象类型的数据，响应式依靠reactive函数实现

reactive

定义一个对象类型的响应式数据，注意，是深层次的响应式数据 使用上类似ref()函数

注意

1，通过reactive函数定义的数据，修改时不像ref要使用.value
2，reactive通过使用Proxy来实现响应式，并且通过Reflect操作源对象内部的数据

点击阅读下一节