首页 > 数据库> 文章详细

Vue — 数据代理 Object.defineProperty

2022-10-10 12:11:37 阅读：231 来源： 互联网

标签：

一、定义：

通过一个对象，代理对另一个对象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

标签：
来源：