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