Vue双向数据绑定原理-上

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

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

2.Vue双向数据绑定原理-中2023-09-303.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

收起

Vue响应式的原理(数据改变界面就会改变)是什么?

时时监听数据变化, 一旦数据发生变化就更新界面, 这就是Vue响应式的原理。

Vue是如何实现时时监听数据变化的

通过原生JS的defineProperty方法, 通过get和set方法来监听数据的变化。

defineProperty方法的特点

可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

defineProperty用法

?> 可以直接在一个对象上定义一个新属性

假设我有这么一个需求，给obj对象动态新增一个name属性, 并且name属性的取值必须是BNTang，通过 defineProperty 方法实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    console.log(obj);
</script>

defineProperty 是属于 Object 对象的方法，所以我们可以直接通过 Object.defineProperty 来调用。

• 第一个参数是要定义属性的对象（obj: 需要操作的对象）
• 第二个参数是要定义或修改的属性的名称（prop: 需要操作的属性）
• 第三个参数是将被定义或修改的属性描述符（descriptor: 属性描述符）

最终语法如下：

Object.defineProperty(obj, prop, descriptor)

在上面提出的需求中，我们需要动态新增一个 name 属性，所以第一个参数就是 obj 对象，第二个参数就是 name 属性，第三个参数就是 name 属性的描述符。
我在第三个参数中定义了一个 value 属性，这个 value 属性的值就是 BNTang，这样我们就实现了动态新增一个 name 属性，并且 name 属性的值是 BNTang。
value 属性描述符的作用可以通过value来告诉defineProperty方法新增的属性的取值是什么。

!> 默认情况下通过defineProperty新增的属性的取值是不能修改的。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });
    obj.name = 'test';
    console.log(obj);
</script>

如果想修改, 那么就必须显示的告诉defineProperty方法，这个属性是可修改的，通过writable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
    });
    obj.name = 'test';
    console.log(obj);
</script>

!> 默认情况下通过defineProperty新增的属性是不能删除的。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
    });
    obj.name = 'test';
    delete obj.name;
    console.log(obj);
</script>

如果想删除, 那么就必须显示的告诉defineProperty方法，这个属性是可删除的，通过configurable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        writable: true,
        configurable: true,
    });
    obj.name = 'test';
    delete obj.name;
    console.log(obj);
</script>

!> 默认情况下通过defineProperty新增的属性是不能遍历(迭代的)。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    for (let key in obj) {
        console.log(key, obj[key]);
    }
</script>

如果想迭代, 那么就必须显示的告诉defineProperty方法，这个属性是可迭代的，通过enumerable属性描述符来实现。

<script>
    let obj = {};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang',
        enumerable: true
    });

    for (let key in obj) {
        console.log(key, obj[key]);
    }
</script>

到此为止，定义一个新属性的方法就介绍完了，接下来我们来看看如何修改一个对象的现有属性。

其实非常的简单，只需要在我们定义对象的时候初始化一个属性，并且给这个属性一个初始值，然后在调用 defineProperty 方法的时候，将这个属性的值修改为我们想要的值就可以了。

代码如下：

<script>
    let obj = {name: 'Example'};

    Object.defineProperty(obj, 'name', {
        value: 'BNTang'
    });

    console.log(obj);
</script>