vue2=>vue3原理解析

仅仅为了方便学习记录信息，未有其他用途。（采摘）

Vue2与Vue3的响应式

vue2的响应式

核心:
*对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
*数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
问题:
*对象直接新添加的属性或删除已有属性, 界面不会自动更新
*直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

 // 重新定义数组原型，Object.defineProperty不具备监听数组的方法
const oldArrayProperty = Array.prototype;
const arrProto = Object.create(oldArrayProperty);
["push", "pop", "shift", "unshift", "splice"].forEach(
      (methodName) =>
        (arrProto[methodName] = function () {
          updateView();
          oldArrayProperty[methodName].call(this, ...arguments);
        })
    );
 function observer(target){
     if(typeof target !== 'object' || target === null){
         return target
     }
     // 如果是数组类型,重写数组原型的方法("push","pop","shift","unshift","splice")
     if(Array.isArray(target)){
         target.__proto__ == arrProto;
     }
     // 如果是对象，遍历对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter
     for(let key in target){
         defineReactive(target,key,target[key])
     }
 }
function defineReactive(target, key, value){
    // 如果对象有更多的层级，再次调用observer监听方法，实现深层次的监听。
    observer(value);
    Object.defineProperty(target, key, {
        get(){
            return value;
        },
        set(newValue){
            // 设置值的时候也需要深度监听
            observer(value);
            if(newValue !== value){
                value = newValue;
                // 数据驱动视图，如果数据改变，就调用视图更新的方法。对应到Vue中是执行VDOM
                updateView();
            }
        }
    })
}

Vue3的响应式

核心:
*通过proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等...
*通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作.

const user = {
    name: "John",
    age: 12
};
/* 
  proxyUser是代理对象, user是被代理对象
  后面所有的操作都是通过代理对象来操作被代理对象内部属性
 */
const proxyUser =new Proxy(user, {
    // 拦截读取属性值
    get (target, prop) {
        return Reflect.get(target, prop)
    },
    // 拦截设置属性值或添加新属性
    set (target, prop, value) {
        return Reflect.set(target, prop, value)
    },
    // 拦截删除属性
    deleteProperty (target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})
proxyUser.name = 'bob'

认识vue3<===========================>Composition API(常用)