vue2和vue3 的响应式原理

vue2 实现原理：

        // vue2的响应式原理
        // 1.对象类型：通过 Object.defineProperty() 对属性的读取，修改进行拦截(数据劫持)
        // 2.数组类型：通过重写更新数组的一系列方法来实现拦截(对数据的变更方法进行了包裹)

        // 存在的问题：
        // 1.新增属性、删除属性、界面不会更新；
        // 2.直接通过下标修改数组的值，界面不会更新
        // 3.比较繁琐，你要遍历对象的每一个属性(下面我是复制的一份)
        let person = {
            name: "张三",
            age: 18
        }
        let p = {}
        Object.defineProperty(p, "name", {
            configurable: true, // 可配置的(用于删除属性)
            get() { // 读取属性调用
                return person.name
            },
            set(value) { // 修改属性调用
                return person.name = value
            }
        })
        Object.defineProperty(p, "age", {
            configurable: true, // 可配置的(用于删除属性)
            get() { // 读取属性调用
                return person.age
            },
            set(value) { // 修改属性调用   value:修改后的属性值
                return person.age = value
            }
        })

vue3实现原理：

    // vue3的响应式原理
    let person = {
        name: "李四",
        age: 20
    }
    const p = new Proxy(person, {
        get(target, propName) { // 读取属性调用
            // target：源对象  propName：属性名
            return Reflect.get(target, propName) // Reflect ES6的语法
        },
        set(target, propName, value) { // 修改、追加属性调用
            // target：源对象  propName：属性名  value:追加/修改的值
            return Reflect.set(target, propName, value) // Reflect ES6的语法
        },
        deleteProperty(target, propName) { // 删除属性调用
            return Reflect.deleteProperty(target, propName) // Reflect ES6的语法
        },
    })