Vue — 数据代理 Object.defineProperty

原创已于 2022-05-28 17:14:14 修改 · 632 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端框架

于 2022-04-21 12:26:32 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细探讨了Vue中数据代理的概念，利用`Object.defineProperty()`实现数据绑定的原理。通过设置setter和getter，实现了数据驱动视图，确保属性改变时能自动更新视图。数据代理流程包括创建实例、数据存储、属性代理以及属性修改的响应式处理。同时，提到了`Object.defineProperty()`的特点，如不可遍历、不可修改和不可删除。

五、Object . defineProperty() 特点

一、定义：

通过一个对象，代理对另一个对象data中属性的操作（读/写）。目的是为了更方便操作data中的数据

二、语法：

Object.defineProperty(obj, prop, descriptor)

第一个参数 obj，表示被添加（特性）的对象

第二个参数 prop，表示添加的属性

第三个参数 descriptor，表示要定义或修改的属性值

Object.defineProperty（）可以为属性添加特性，每一个被添加过的属性，都会拥有属于自己的getter和setter。正是有了getter和setter，可以实现数据驱动视图，数据实时绑定的效果。

示例：

  let obj1 = { name: "kubo" };
  let obj2 = { age: 20 };

  // 为obj2添加新特性name
  Object.defineProperty(obj2, "name", {
    // 当obj2的name值被读取时,调用get函数
    get() {
      // 返回obj1的数据
      return obj1.name;
    },

    // 当obj2的name值被修改时,调用set函数
    set(value) {
      obj1.name = value;
    },
  });

三、数据代理的基本原理

1、通过Object . defineProperty方法，将data对象中所有的属性添加到vm上

2、为每一个添加到vm上的属性，都配置setter和getter等响应式操作，实现对对象里面属性监视

3、在setter/getter内部操作data中对应的属性。（这样改了属性就会引起对应的setter调用，会重新解析模板）

4、模板重新解析的时候，会重新生成虚拟Dom,新旧DOM对比，重新渲染页面

四、数据代理流程

1、实例化vue后，得到实例对象vm。

2、将Model里的data数据存储一份至vm的_data

(至此，vm自身还没有data里的数据，但是可以通过vm._data获取到)

3、（开始代理）vm开始为自身添加_data中的属性。属性值是通过getter读取到_data中对应的属性值。

即：

vm._data = options.data = data ;

4、若直接通过vm修改了属性值，则直接映射到_data里的属性值

五、Object . defineProperty() 特点

1、被添加的属性名，不会被遍历到

可通过配置 enumerable属性，默认值是false.

2、被添加的属性名，不能被修改

可通过配置 writable修改，默认值是false

3、被添加的属性名，不能被删除

通过配置 configurable，默认值是false

Object.defineProperty ( person ,'sex' , {
    value:'男',
    // 设置该属性，可以被遍历
    enumerable:true,  
    // 设置该属性，可以被修改
     writable:true,
    // 设置该属性，可以被删除
    configurable:true

} )