通过一个对象,代理对另一个对象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里的属性值
1、被添加的属性名,不会被遍历到
可通过配置 enumerable属性,默认值是false.
2、被添加的属性名,不能被修改
可通过配置 writable修改,默认值是false
3、被添加的属性名,不能被删除
通过配置 configurable,默认值是false
Object.defineProperty ( person ,sex , { value:男, // 设置该属性,可以被遍历 enumerable:true, // 设置该属性,可以被修改 writable:true, // 设置该属性,可以被删除 configurable:true