setup是什么？
认识setup
1.理解：vue3.0出现中的一个配置 值为一个函数
2.是所有CompositionAPI（组合API）表演舞台
3.组建中所用到的：数据、方法、均要在setup中配置
4.set的函数2种返回值：
1.若返回一个对象，则对想中的属性、方法、在模板中均可以直接使用
2.若返回一个渲染函数：则可以自定义渲染内容
5.注意事项：
1.尽量不与2.X配置混用
vue2中的data methods computed 可以访问setup中的属性、方法
但在setup中不能访问到vue2.Xpe配置
如果有重名，setup优先
2.set不能是一个async函数，因为返回值不再是return对象，而是一个promise对象，模板看不到return对象的属性
在官方文档中使用 setup 函数时，它将接收两个参数：
- props
- context
(1)、setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}}
(2)、注意：
(1.因为 props 是响应式的，你不能使用 ES6 解构，它会消除 prop 的响应性
(2.如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作
示例：
setup(props) {
const { title } = toRefs(props)
}
(3)、如果 title 是可选的 prop，则传入的 props 中可能没有 title 。在这种情况下，toRefs 将不会为 title 创建一个 ref 。你需要使用 toRef 替代它
示例：
// MyBook.vueimport { toRef } from 'vue'setup(props) {
const title = toRef(props, 'title')
console.log(title.value)}
二、Context
(1)、传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象，它暴露组件的三个 property：
export default {
setup(props, context) {
// Attribute (非响应式对象)
console.log(context.attrs)
// 插槽 (非响应式对象)
console.log(context.slots)
// 触发事件 (方法)
console.log(context.emit)
}}
(2)、context 是一个普通的 JavaScript 对象，也就是说，它不是响应式的，这意味着你可以安全地对 context 使用 ES6 解构
attrs 和 slots 是有状态的对象，它们总是会随组件本身的更新而更新。这意味着你应该避免对它们进行解构，并始终以 attrs.x 或 slots.x 的方式引用 property。请注意，与 props 不同，attrs 和 slots 是非响应式的。如果你打算根据 attrs 或 slots 更改应用副作用，那么应该在 onUpdated 生命周期钩子中执行此操作
setup的细节点
回顾vue2的props以及slot
vue2：
1.不使用props接收的值可以在实例vm身上的$attrs对象里访问到
2.使用props接收,在$attrs对象里访问不到
3.使用props接收父组件传递的值可以限制数据类型,而直接使用$attrs对象获取则无法限制类型,不符规范
父组件中直接在子组件里面添加标签节点,如果子组件接未接收,vm实例上的$slot会有默认的default数组,数组里面是所添加未接收的节点
vue3的setup的props以及slot
vue3的setup注意点：
1.setup的执行时机
在beforeCreate之前执行一次,this是undefined
2.setup的参数
props：值为对象,包含：组件外部传递过来，而且组件内部声明接收了的属性
context:上下文对象
attrs:值为对象,包含：组件外部传递过来,但没有在props配置中声明的属性，相当于$attrs
slots:收到的插槽内容：相当于thisthis.$slots
emit:分发自定义事件的函数,相当于this.$emit