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的语法
        },
    })

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

景睿哲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值