Vue双向数据绑定原理-中

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-27

2.Vue双向数据绑定原理-中2023-09-30

3.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-035.手撕Vue-提取元素到内存2023-10-146.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-158.手撕Vue-编译模板数据2023-10-159.手撕Vue-监听数据变化2023-10-1510.手撕Vue-数据驱动界面改变上2023-10-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

defineProperty方法

defineProperty除了可以动态修改/新增对象的属性以外, 还可以在修改/新增的时候给该属性添加get/set方法, 从而实现数据劫持。

defineProperty get/set方法特点

只要通过defineProperty给某个属性添加了get/set方法,那么以后只要获取这个属性的值就会自动调用get, 设置这个属性的值就会自动调用set。

!> 但是有一个注意点, 如果设置了get/set方法, 那么就不能通过value直接赋值, 也不能编写writable:true。

defineProperty get 方法

<script>
    let obj = {};
    let oldValue = "Example"
    Object.defineProperty(obj, 'name', {
        get() {
            console.log('get方法被执行了');
            return oldValue;
        }
    });

    console.log(obj.name);
</script>

defineProperty set 方法

<script>
    let obj = {};
    let oldValue = "Example"
    Object.defineProperty(obj, 'name', {
        set(newValue) {
            if (oldValue !== newValue) {
                console.log("set方法被执行了");
                oldValue = newValue;
            }
        }
    });
    obj.name = 'BNTang'
</script>

总结

通过上面的例子可以看出, 只要给某个属性添加了get/set方法, 那么以后只要获取这个属性的值就会自动调用get, 设置这个属性的值就会自动调用set。还有就是如果设置了get/set方法, 那么就不能通过value直接赋值, 也不能编写writable:true。