Vue3中的setup函数setup是什么? setup 是 Vue3.x 新增的一个选项，他是组件内使用 Compos

setup是什么?

setup 是 Vue3.x 新增的一个选项，他是组件内使用 Composition API 的入口。

export default{

setup(){

return{}
   }
}

⚠️注意：setup()内使用响应式数据时，需要通过.value获取；代码案例：

import { ref } from 'vue'
export default{
setup(){
const count = ref(0)   //ref定义一个变量
console.log(count.value)
   } 
}

无法获取this:因为setup函数的执行时机是在 beforeCreate 之前执行，组件对象还没有创建，因此组件实例对象 this 还不可用，时 this 是 undefined，不能通过 this 来访问 data、computed、methods 或 props。

 export default {
  setup(){
   console.log(this) //undefined
   }
 }

返回值:返回对象中的属性会与 data 函数返回的对象属性合并成为组件对象属性，返回对象中的方法会与 methods 中的方法合并成为组件对象的方法，这是因为Vue3默认是向下兼容，在Vue3中同样可以使用Vue2中的方法定义变量和方法，如有重名setup 优先。
无法获取 data 或 methods 内容：因为 setup 中的 this 不可用，methods 中可以访问 setup 提供的属性和方法，但在 setup 方法中不能访问 data 和 methods 中的内容，所以不建议在vue组件中混合使用。
不可添加 async：setup 不能是一个 async 函数，因为返回值不再是 return 的对象，而是 promise，因此模版中就不可以使用 return 中返回对象的数据了。使用 setup 时，它接受两个参数：
props：组件传入的属性对象，含有父组件向子组件传递的数据，并且是在子级组件中使用 props 接收到的所有属性，由于是响应式的，当传入新的 props 时，会及时被更新，所以不可以使用 ES6 解构，解构会消除它的响应式。
context：上下文对象，可通过 ES6 语法解构
1. attrs：获取当前组件标签上所有没有通过 props 接收的属性的对象，相当于 this.$attrs
2. slots：包含所有传入的插槽内容的对象，相当于 this.$slots
3. emit：用来分发自定义事件的函数，相当于 this.$emit

分别对应 Vue2.x 中的 $attr 属性、slot 插槽和 $emit 发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

选项式API 生命周期选项和组合式 API 之间的映射