组合式 API 基础
setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。
setup的两个注意点：
1、setup执行时机，在beforeCreate之前执行一次，this是undefined；
1.1、setup的参数：
（1）：props：指为对象，包含组件外部传递过来，且组件内部声明接收了的属性。
（2）：context：上下文对象
attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs；
slots：收到的插槽内容，相当于this.$slots;
emit:分发自定义事件的函数，相当于this.$emit。
2、ref函数
2.1、作用：定义一个响应式数据
2.2、语法：const xxx=ref(initValue)
创建一个包含响应式数据的引用对象（reference对象，简称ref对象）；
js中操作数据：xxx.value;
模块中读取数据不需要value，直接{{xxx}}；
2.3、备注
接收的数据可以是基本类型也可以是对象类型；
基本类型的数据响应式依然靠Object.defineProperty()的get和set完成的；
对象类型的数据：内部求助了Vue3中的一个新函数---reactive函数；
换句话说，ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用。
3、reactive函数
作用：定义一个对象类型的响应式数据；
语法：const 代理对象=reactive(被代理对象）接收一个对象（或数组），返回一个代理对象（proxy对象）；
4、reactive和ref对比
1、从定义数据角度对比：
ref用来定义：基本数据类型；
reactive用来定义：对象（或数组）类型数据；
备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过reactive转为代理对象；
2、从原理角度对比：
ref通过Object.defineProperty()的get和set来实现响应式；
reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。
3、从使用角度对比：
ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value；
reactive定义的数据：操作数据与读取数据均不需要.value；
6、Vue3中的计算属性和监视
1、computed函数
2、watch函数
watch函数可以传递三个参数，第一个参数是监视的属性，第二个参数是执行的回调函数，第三个参数是配置；
//情况一：监视ref所定义的一个数据
watch(sum,(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue);
},{immediate:true})
//情况二：监视ref所定义的多个响应数据
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum变了huomsg变了',newValue,oldValue);
})
//情况三：监视reactive所定义的一个响应式数据 的全部属性
// 注意：1、无法正确的获取oldValue 2、强制开启了深度监视（deep配置无效）
watch(person,()=>{
console.log('person变化了');
})
//情况四：监视reactive所定义的一个响应式数据中的某个属性
watch(()=>person.age,(newValue,oldValue)=>{
console.log('age变化了',newValue,oldValue);
})
//情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
console.log('age,name变化了',newValue,oldValue);
})
注意特殊情况 当监视reactive所定义的对象中的某个属性，这个时候deep配置有效
8、Vue3中的自定义的hook函数
定义：本质是一个函数，把setup函数中使用的Composition API进行了封装；
类似于Vue2中的mixin；
原文链接：https://blog.csdn.net/qq_49916504/article/details/125324077