Javascript

Vue — 数据代理 Object.defineProperty

本文主要是介绍Vue — 数据代理 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
这篇关于Vue — 数据代理 Object.defineProperty的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!