js 实现vue的双向数据绑定

1、Object.defineProperty(obj,prop,descriptor)

vue.js的双向数据绑定通过Object.defineProperty() 方法实现的。俗称--属性拦截器 该方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。

Object.defineProperty(obj,prop,descriptor) @param:obj:需要定义属性的对象 prop:需要定义或修改的属性 descriptor:将被定义或修改属性的描述符

详解：对象里面目前存在的属性描述符主要有两种形式：数据描述符和存取描述符。
数据描述符：拥有可写或不可写值得属性
          configurable:当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除；
          enumerable:当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
          writable:  当且仅当该属性的值为true时，该属性才能被赋值运算符改变，默认为false.
          value:     该属性对应的值，可以是任意有效的javascript的值（数值，对象，函数等），默认为undefined

存取描述符：由一对getter-setter函数功能来描述的属性
          configurable:当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除；
          enumerable:当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
          get: 给属性提供getter的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该 方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined 
          set：设置属性值的方法， 如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法



2、Object对象有一个freeze的方法，用于实现对象属性和方法的不可更改

          const arr = [1,2,3,4];
          Object.freeze(arr);//变量arr不可更改
          arr.push(5);//报错：不能添加属性

3、Object。definePropperty也可以实现规定变量的不可更改

          const obj = {key:'chris',value:'person'};
          Object.defineProperty(obj,'key'){
              configurable:false,   //不可删除
              writable:false,     //不可写
          }
复制代码

转载于:https://juejin.im/post/5bf518b7f265da61343807f6