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方法 打印（我要被写入了 我是写入的值：我要写入你）