[JavaScript知识库]模拟vue响应式

1、vue2:?

? ? ? ? (1)实现原理：

? ? ? ? ? ? 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）

? ? ? ? ? ? 数组类型：通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）

? ? ? ? ? ? Object.defineProperty(data, 'count', {

? ? ? ? ? ? ? ? set(){},

? ? ? ? ? ? ? ? get(){}

? ? ? ? ? ? })

? ? ? ?（ 2）存在问题：

? ? ? ? ? ? 新增属性、删除属性，界面不会更新

? ? ? ? ? ? 直接通过下标修改数组，界面不会自动更新

        let person = {
            name: 'huihui',
            age: 18
        }
        // 模拟vue2中实现响应式原理
        // #region
        let p = {}
        Object.defineProperty(p, 'name', {
            configurable: true,
            get() {
                return person.name
            },
            set(value) {
                person.name = value
            }
        })
        Object.defineProperty(p, 'age', {
            configurable: true,
            get() {
                return person.age
            },
            set(value) {
                person.age = value
            }
        })
        // 1、读取可以响应式（返回的就是原对象的数据呀，原对象数据改，读取到的就是新的数据呀）
        console.log(p.name);
        // 2、赋值也是可以响应式的（是代理对象可以被重新赋值，但是代理对象里面的被重新赋值了就会影响原数据，所以响应式）
        p.name = 'guai'
        p.age = 16
        // 检验一下原数据和代理对象数据
        console.log(person); // 原始数据已经被改掉了
        console.log(p);

        // 3、添加一个新属性不是响应式
        p.sex = 'nan'
        // 检验一下原数据和代理数据
        console.log(p);  //代理对象是添加了，但是没有getter setter所以原数据不会变
        console.log(person);

        // 4、删除一个属性不是响应式
        // 开启configuration:true,可以删除代理对象里面的属性，但是仍然不影响原数据
        delete p.name
        delete p.sex
        console.log(p);
        console.log(person);

2.vue3:

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

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

        const p = new Proxy(person, {
            get(target, propName) {
                console.log(`有人读取了${propName}属性`);
                // return person[propName]
                return Reflect.get(target, propName)
            },
            // 有人修改或者追加时都会调用
            set(target, propName, newValue) {
                console.log(`有人修改了${propName}属性,我要去渲染页面了`);
                // 因为person.propName（这是个变量，不能直接点）是错误的写法
                // person[propName] = newValue
                Reflect.set(target, propName, newValue)
            },
            deleteProperty(target, propName) {
                console.log(`有人删除了${propName}属性,我要去渲染页面了`);
                // return delete target[propName]
                Reflect.deleteProperty(target, propName)
            }
        })
        // 1、读取数据，响应式的
        console.log(p.name);
        // 2、修改数据，响应式的
        p.name = 'guai'
        console.log(person);
        console.log(p);
        // 3、增加一个新属性
        p.sex = 'nan'
        console.log(person);
        console.log(p);
        // 4、删除一个已有的属性
        delete p.name
        console.log(person);
        console.log(p);