从Vue2.x深入过度Vue3.x，Composition API是个啥

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」。

初识Composition API（组合API）

1、组件中所用到的数据和、方法等，都可以放在setup中
2、setup函数存在两种返回值：
1）、当返回值是对象，则对象中的属性、方法均可在模板中直接使用；
2）、当返回值是渲染函数，则可以自定义渲染内容，并以该内容为准
3、注意问题：
1）、尽量不要与Vue2.x配置混用

Vue2.x配置data、methods、computed...都可以访问到setup中的属性和方法；反之，Vue3.x的setup访问不到Vue2.x中的数据和方法；
在混用期间，如果Vue.2x与Vue3.x中存在重名，则以Vue3.x的setup优先。
2）、setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板自然看不到return对象中的属性。

ref函数

作用：定义一个响应式数据，const xxx= ref(initVal)；称之为引用对象（ref对象）
基本类型则通过xxx.value = xxx，基本类型响应式通过Object.defineProperty()的getter和setter完成的；
引用类型则通过xxx.value.xxx = xxx，通过一个新函数reactive函数完成（原理采用Proxy，即封装在reactive函数中）；
模板中使用，则直接xxx即可。
在ref定义对象，其在原型上也求助于Proxy，故也可以定义响应式对象，但是不建议，建议采用reactive。

reactive函数

作用：定义一个引用类型响应式数据（基本类型则是通过ref函数）；
基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的；
定义引用类型（对象、数组）数据，返回一个代理器对象proxy对象；
可以检测到深层次对象（Object、Array）变化；

总结ref函数和Reactive函数

很多场景建议采用reactive定义数据，得到一个代理对象，通过代理对象操作原对象，并且在Vue3.x中可以捕获到数据更新（数据劫持），如：

let person = reactive({ // 基本类型和引用类型 ... })

响应式原理

在这里简单回顾一下Vue2.x响应式原理

对象类型：通过Object.defineProperty()对属性的读取和修改进行拦截（数据劫持）；
数组类型：通过重写更新数组的一些列方法实现拦截，对数组方法进行二次封装。
缺点：对对象新增的属性、删除属性；通过下标修改数组时，则监听不到变化导致数据更新了，页面没有重新渲染。
改进：借助this. $set()或者Vue.set()；删除this.$ delete()或者Vue.delete()；数组下标修改还有另一个方法splice(index,1,value)。

在这里简单回顾一下Vue3.x响应式原理

简单的体验一下新方法window.Proxy

let person = {}
const p = new Proxy(person,{
    get(target,key){ // target即是person，key即是读取的属性
        // 监听到数据被读取，可以干点啥
        return target[key]
    },
     // 更新的调用，Vue3增加：对象新增新的属性也调用
    set(target,key,value){ // value即是传入修改的值
        // 监听到数据被更改，可以干点啥
        target[key] = value
    },
    // 比Vue2.x多的地方
    deleteProperty(target,key){
           // 监听到target的key属性被删除，干点啥
            return delete target[key]
    }
})

在了解一下反射对象Reflect，对源对象进行修改，
注：在Object.defineProperty(obj,'name',{})，在定义一个Object.defineProperty(obj,'name',{})，那代码就直接报错，不往下执行了，但是Reflect则可以，通过返回值为true则说明这个执行成功。

let obj = { name: 'zhangsan' }
const r1 = Reflect.defineProperty(obj,'name',{
    get(){
        return 'lisi'
    }
})
const r2 = Reflect.defineProperty(obj,'name',{
    get(){
        return 'wangwu'
    }
})
console.log(r1,r2)  // true,false

Proxy改进，增强健壮性，Vue3.x雏形出来了

const p = new Proxy(person,{
    get(target,key){ // target即是person，key即是读取的属性
        // 监听到数据被读取，可以干点啥
        return Reflect.get(target,key)
    },
     // 更新的调用，Vue3增加：对象新增新的属性也调用
    set(target,key,value){ // value即是传入修改的值
        // 监听到数据被更改，可以干点啥
        Reflect.set(target,key,value)
    },
    // 比Vue2.x多的地方
    deleteProperty(target,key){
           // 监听到target的key属性被删除，干点啥
            return Reflect.deleteProperty(target,key)
    }
})

总结

有Vue2.x基础的，学习Vue3.x的还是比较容易上手的，我认为可以先从Vue3.x的一些新的东西入手，其实就是解决了Vue2.x遗留的一些缺点。
最后从性能方面提升...