VUE数据劫持代理(Object.defineProperty())

最新推荐文章于 2024-08-06 17:46:47 发布

原创

最新推荐文章于 2024-08-06 17:46:47 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

本文通过分析Vue.js中数据劫持的实现方式，重点探讨了Object.defineProperty()在数据响应化过程中的关键作用。结合MDN的相关解释，详细解释了如何使用该方法来实现对象属性的访问和修改控制。

MDN关于Object.defineProperty


    //模拟vue中的data
    let data = {
        name: "aaa",
        age: 22
    }
    // 模拟组件实例
    let _this = {};
    //使用 Object.defineProperty

    for (let item in data) {
        // console.log(item, data[item]);
        Object.defineProperty(_this, item, {
            //get用来获取扩展属性的值，当获取该属性的值是使用get方法
            get() {
                console.log('调用get（）');
                return data[item]
            },
            //监视扩展属性，只要一修改就调用
            set(newValue) {
                console.log('调用了set（）', newValue);
                data[item] = newValue;
            }
        })

    }
    console.log(_this);
    //通过Object.defineProperty的get方法修改的属性，不能使用 对象.属性 修改,但是会出发set（）方法
    _this.age = 55// 调用了set（） 55

    // console.log(_this.name);