vue2和vue3响应式原理对比

vue2响应式原理

    <script>
        let person = {
            name: '张三',
            age: 18
        }
        // 模拟vue2中实现响应式
        let p = {}
        Object.defineProperty(p, 'name', {
            configurable: true, // 允许执行删除操作
            get() { // 有人读取name时调用
                console.log('有人读取了name属性！');
                return person.name
            },
            set(value) { // 有人修改name时调用
                console.log('有人修改了name属性，我发现了，我要去更新界面了！');
                person.name = value
            }
        })
        Object.defineProperty(p, 'age', {
            configurable: true, // 允许执行删除操作
            get() { // 有人读取name时调用
                console.log('有人读取了age属性！');
                return person.age
            },
            set(value) { // 有人修改name时调用
                console.log('有人修改了age属性，我发现了，我要去更新界面了！');
                person.age = value
            }
        })
    </script>

控制台输出：

实现原理：
1、对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
2、数组类型：通过重写更新数组的一系列方法进行拦截。（对数组的变更方法进行了包裹）。
存在问题：
1、新增属性、删除属性，界面不会更新。
2、直接通过下标修改数组，界面不会更新。

vue3响应式原理

    <script>
        let person = {
            name: '张三',
            age: 18
        }
        // 模拟vue3中实现响应式
        const p = new Proxy(person, {
            // 有人读取p的某个属性时调用
            get(target, propName) {
                console.log(`有人读取了p身上的${propName}属性`);
                // return target[propName]
                return Reflect.get(target, propName)
            },
            // 有人修改p的某个属性，或者给p追加某个属性时调用
            set(target, propName, value) {
                console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`);
                // target[propName] = value
                Reflect.set(target, propName, value)
            },
            deleteProperty(target, propName) {
                console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`);
                // return delete target[propName]
                return Reflect.deleteProperty(target, propName)
            }
        })
    </script>

控制台输出：

实现原理：
1、通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
2、通过Reflect（反射）：对被代理对象的属性进行操作。