Vue3 常用的Composition API

1. setup配置项

   1. 理解: Vue3.0中一个新的配置项，值为一个函数。

   2. setup是所有Composition API (组合API) “ 表演的舞台”。

   3. 组件中所用到的:数据、方法等等,均要配置在setup中。

   4. setup函数的两种返回值：

      1. 若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点关注!)

      2. 若返回一个渲染函数：则可以自定义渲染内容。(了解)

   5. 注意点：

      1. 尽量不要与Vue2.x配置混用

         1. Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。

         2. 但在setup中不能访问到Vue2.x配置(data、 methos、 computed...) 。

         3. 如果有重名，setup优先。

      2. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。

2. ref函数

   1. 作用：定义一个响应式的数据

   2. 语法： const xxx = ref(initValue)

      1. 创建一个包含响应式数据的引用对象（reference对象）。

      2. JS中操作数据： xxx.value

      3. 模板中读取数据： 不需要.value，直接： <div>{{xxx}}</div>

   3. 备注：接收的数据可以是:基本类型、也可以是对象类型。基本类型的数据:响应式依然是靠Object.defineProperty()get 与 set 完成的。。对象类型的数据:内部“求助”了Vue3.0中的一个新函数reactive 函数。

3. reactive函数

   1. 作用：定义一个对象类型的响应式数据（基本类型别用它,用ref函数)

   2. 语法: const代理对象= reactive(被代理对象)接收一个对象（或数组) ,返回一个代理器对象(proxy对象)

   3. reactive定义的响应式数据是“深层次的”。内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象

   4. 内部数据都是响应式的

4. Vue3.0中的响应式原理

   1. vue2.x的响应式

      1. 实现原理：

         1. 对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持) 。

         2. 数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹) 。

      2. 存在问题：

         1. 新增属性、删除属性,界面不会更新。

         2. 直接通过下标修改数组,界面不会自动更新。

      3. 代码实现响应式示例

         let person = {
             name: 'zhangsan',
             age: 18
         }
         let p = {} 
         
         Object.defineProperty(p, 'name' , {     
             configurable:true,    // 可配置----可删除，不可响应式
             get(){ //读取name时调用
                 return person.name
             },
             set(value){ // 修改name时调用
                 console.log('修改了name属性')
                 person.name = value
             }
         })
         Object.defineProperty(p, 'age',{
             get(){ //读取age时调用
                 return person.age
             },
             set(value){ //修改age时调用
                 console.log('修改了age属性')
                 person.age = value
             }
         })   

   2. vue3.x的响应式

      1. 实现原理：

         1. 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

         2. 通过Reflect（反射）：对源对象的属性进行操作。

         3. MDN文档中描述的Proxy与Reflect:

            1. Proxy: Proxy - JavaScript | MDN

            2. Reflect: Reflect - JavaScript | MDN

      2. 代码实现响应式示例 （Proxy--代理对象，Reflect--反射对象）

         let person = {
             name: 'zhangsan',
             age: 18
         }
         
         const p = new Proxy(person,{
             //读取p的某个属性时调用
             get (target, propName){
                 console.log(`读取了p身上的${propName}属性`)
                 return Reflect.get(target,propName)
             },
             //修改p的某个属性、或给p追加某个属性时 调用
             set(target, propName, value){
                 console.log(`修改了p身上的${propName}属性`)
                 Reflect.set(target,propName,value)
             },
             //删除p的某个属性时调用
             deleteProperty(target, propName){
                 console.log(`删除了p身上的${propName}属性`）
                 return Reflect.deleteProperty(target,propName)
             }
         })

         对比使用windows上Reflect的defineProperty，和Object上的defineProperty

         let obj = {a:1,b:2} 
         
         //使用Object上的defineProperty--------------
         try {
             Object.defineProperty(obj, 'c',{ 
                 get(){
                     return 3
                 }
             })
             Object.defineProperty(obj, 'c',{ 
                 get (){
                     return 4
                 }
             }) 
         } catch (error) { 
             console.log(error) 
         }
         
         //使用Reflect上的defineProperty-------------
         const x1 = Reflect.defineProperty(obj,'c',{ 
             get (){
                 return 3
             }
         }) 
         console.log(x1) 
         const x2 = Reflect.defineProperty(obj,'c',{ 
             get (){
                 return 4
             }
         }) 
         
         if(x2){
             console.log('某某某操作成功了！')
         }else{
             console.log('某某某操作失败了！')
         }

5. reactive对比ref

   1. 从定义数据角度对比：

      1. ref用来定义：基本类型数据。

      2. reactive用来定义:对象（或数组)类型数据。

      3. 备注: ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象。

   2. 从原理角度对比：

      1. ref通过 object.defineProperty()get 与 set 来实现响应式（数据劫持）。

      2. reactive通过使用Proxy来实现响应式(数据劫持) ,并通过Reflect操作源对象内部的数据。

   3. 从使用角度对比：

      1. ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value。

      2. reactive定义的数据：操作数据与读取数据：均不需要.value。

6. setup的两个注意点

   1. setup执行的时机。

      1. 在beforeCreate之前执行一次, this是undefined。

   2. setup的参数。

      1. props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

      2. context: 上下文对象

         1. attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于 this.$attrs。

         2. slots: 收到的插槽内容，相当于 this.$slots。

         3. emit:分发自定义事件的函数，相当于 this.$emit。

7. 计算属性与监视

   1. 计算属性computed

      1. 与Vue2.x中computed配置功能一致

      2. 写法

         import {computed} from 'vue'
         setup(){
             //计算属性—简写 --- 只读
             let fullName = computed(()=>{ 
                 return person.firstName + '-' + person.lastName 
             })
             //计算属性—完整  ---可读可写
             let fullName = computed({
                 get (){
                     return person.firstName + '-' + person.lastName
                 },
                 set (value){
                     const nameArr = value.split('-')
                     person.firstName = nameArr[0]
                     person.lastName = nameArr[1]
                 }
              })
         }

   2. watch函数

      1. 与Vue2.x中watch配置功能一致

      2. 两个小“坑”：

         1. 监视reactive定义的响应式数据时: oldValue无法正确获取、强制开启了深度监视(deep配置失效) 。

         2. 监视reactive定义的响应式数据中某个属性时: deep配置有效。

      3. 写法

         //数据
         let sum = ref(0)
         let msg = ref('你好啊')
         let person = reactive({
             name:'张三'，
             age:18,
             job:{
                 j1:{salary:20}
             }
         }
         ​
         //情况一：监视ref所定义的一个响应式数据
         watch(sum, (newValue,oldValue)=>{
             console.log('sum变了',newValue,oldValue)
         },{immediate:true}) 
         ​
         //情况二：监视ref所定义的多个响应式数据
         watch([sum,msg], (newValue,oldValue)=>{
             console.log('sum或msg变了',newValue,oldValue)
         },{immediate:true}) 
         ​
         //情况三：监视reactive所定义的一个响应式数据的全部属性
         //1.注意：此处无法正确的获取oldValue
         //2.注意：强制开启了深度监视（deep配置无效）
         oldValuewatch(person.value, (newValue,oldValue)=>{
             console.log('person变化了',newValue,oldValue)
         }，{deep: false}) // 此处的deep配置不生效
         ​
         //情况四：监视reactive所定义的一个响应式数据中的某个属性
         watch(()=>person.name, (newValue,oldValue)=>{
             console.log('person的name变化了',newValue,oldValue)
         })
         ​
         //情况五：监视reactive所定义的一个响应式数据中的某些属性
         watch([()=>person.name, ()=>person.age], (newValue,oldValue)=>{
             console.log('person的name或age变化了',newValue,oldValue)
         }) 
         ​
         //特殊情况
         watch(()=>person. job, (newValue,oldValue)=>{
             console.log('person的job变化了',newValue,oldValue)
         },{deep:true}) 
         //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效 

   3. ref定义的值的监听注意事项

      1. ref定义的简单数据类型不能加value

      2. ref定义的对象需要加value

   4. watchEffect函数

      1. watch的套路是：既要指明监视的属性，也要指明监视的回调。

      2. watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

      3. watchEffect有点像computed:

         //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
         watchEffect(()=>{
             const x1 = sum.value
             const x2 = person.age
             console.log('watchEffect配置的回调执行了')
         })

         1. 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。

         2. 而watchEffect更注重的是过程(回调函数的函数体) ,所以不用写返回值。

8. 生命周期

   1. vue2.x 和 vue3.x生命周期对比

      vue2.x           ====>       vue3.x
       
      beforeCreate     ====>       beforeCreate 
      created          ====>       created
      beforeMount      ====>       beforeMount
      mounted          ====>       mounted 
      beforeUpdate     ====>       beforeUpdate 
      updated          ====>       updated 
      beforeDestroy    ====>       beforeunmount  
      destroyed        ====>       unmounted
        
      相较于vue2，vue3对应修改了同步组件挂在的钩子函数，改成beforeunmount，unmounted
      

   2. 在setup组合api里的声明周期如下

      1. setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，初始创建 data 和 method

      2. onBeforeMount() : 组件挂载到节点上之前执行的函数；

      3. onMounted() : 组件挂载完成后执行的函数；

      4. onBeforeUpdate(): 组件更新之前执行的函数；

      5. onUpdated(): 组件更新完成之后执行的函数；

      6. onBeforeUnmount(): 组件卸载之前执行的函数；

      7. onUnmounted(): 组件卸载完成后执行的函数；

      8. onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；

      9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；

      10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

9. 自定义hook函数

   1. 什么是hook? —本质是一个函数，把setup函数中使用的Composition APl进行了封装。

   2. 类似于vue2.x中的mixin。

   3. 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。

10. toRefs

    1. 作用:创建一个ref对象,其value值指向另一个对象中的某个属性。

    2. 语法: const name = toRef(person, 'name')

    3. 应用：要将响应式对象中的某个属性单独提供给外部使用时。

    4. 扩展: toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法： toRefs(person)