vue 学习二深入vue双向绑定原理

vue双向绑定原理请示总体来讲就是为data的中的每个属性字段添加一个getter/seter属性以此来追踪数据的变化，而执行这部操作，依赖的就是js的Object.defineProperty方法Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

下面就来介绍一下Object.defineproperty()

Object.defineProperty 需要三个参数（object , propName , descriptor）

1 object 对象 => 给谁加
2 propName 属性名 => 要加的属性的名字【类型：String】
3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】

它一共有以下六个个特性

value: 设置属性的值
writable: 值是否可以重写。true | false
enumerable: 目标属性是否可以被枚举。true | false
configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
set: 目标属性设置值的方法
get：目标属性获取值的方法

首先来介绍第一个 value

let a = {};
    Object.defineProperty(a,'name',{
      value:"你好"
    })
    console.log(a);
//打印结果 {name: "你好"}

//如果a中本身拥有一个name属性使用Object.defineproperty去重新定义又会怎样呢

let a = {
    name:'初始值'
};
    Object.defineProperty(a,'name',{
      value:"你好"
    })
    console.log(a);

//打印结果 {name: "你好"}

这个方法是为当前的对象添加一个属性而属性的值为 ‘你好’,如果对象原本便有这个属性那么重写此属性值得一提的是用这种方法定一的属性时只能读取不能更改的

a.name='我要重新给你赋值';
//以上代码将会报错 Error in created hook: "TypeError: Cannot assign to read only property 'name' of object '#<Object>'"

为什么，其原因就是应为没有定义writable特性

第二个 writable

 let a = {};
    Object.defineProperty(a,'name',{
      value:"你好",
      writable:true
    })
    a.name="我要重新给你赋值";
    console.log(a);
//打印结果 {name: "我要重新给你赋值"}

此特性是表明 name属性是否可以写入

第三个enumerable

此属性的表明被定义的属性是否可以可以被for-in循环或Object.keys()检索到

let a = {};
    Object.defineProperty(a, "name", {
      writable: true,
      enumerable: true,
      value:'nihao'
    });
    console.log(Object.values(a));// 打印值["nihao"]

let a = {};
    Object.defineProperty(a, "name", {
      writable: true,
      enumerable: false,
      value:'nihao'
    });
    console.log(Object.values(a));//打印值[] 定义的属性name没有被检索到

第四个 configurable

此属性表明是否可以再次修改特性

let a = {
      a_attr:"11"
    };
    Object.defineProperty(a, "name", {
      writable: false,//定义特性之后
      value: "nihao",
      configurable:false //不允许修改特性
    });
    
     Object.defineProperty(a, "name", {
      value: "nihao",
      writable:true  //将允许写入特性设置为true
    });
    a.name="180" //写入值 报错Error in created hook: "TypeError: Cannot redefine property: name"
    console.log(a.name)

第五个 get set

这个就是vue双向绑定原理的实现基础了这两个属性表明属性被写入或者读取是执行方法并且是同步的

 let a = {};
    Object.defineProperty(a, "name", {
      get(){
        console.log("我要被读取了")
        return '返回的读取的值'
      },
      set(val){
        console.log("我要被写入了 我是写入的值:"+val)
      }
    });
    console.log(a.name); //执行get方法 打印（我要被读取了） 和 （返回读取到的值） 
    a.name="我要写入你" //执行set方法 打印（我要被写入了 我是写入的值：我要写入你）

vue 学习二 深入vue双向绑定原理

猜你喜欢

vue 学习二深入vue双向绑定原理