27. Object.defineProperty

vue2数据驱动,双向绑定原理,Object.defineProperty

Object.defineproperty是ES5的一个函数,为对象添加属性

语法：

   Object.defineProperty(目标对象,属性名,{属性修饰符});

defineProperty描述符

1 value 属性值

2 writable 是否可以修改

3 enumerable 是否可以被枚举，也就是是否可以通过for-in循环返回属性

4 configurable 是否可配置，是否可删除

   let data = {
    
   };
   Object.defineProperty(data,"name",{
        value:"guojiabao",
        // 是否可以修改，默认是false
        writable:true,
        //该属性是否可以被枚举，（是否可以被forin遍历）
        enumerable:true,
        //是否可删除
        configurable:true
   });

   data.name = "小明";

   console.log(data);

   delete data.name;

    for(let index in data){
        console.log(index);
    }

在 descriptor 中不能同时设置访问器（get 和 set）和wriable 或 value，否则会错，就是说想用 get 和 set，就不能用 wriable 或 value 中的任何一个。

let data = {
      
    }

    //当使用了get和set方法时，就别再用value和writable修饰符了
    Object.defineProperty(data,"name",{
        get:function(){
            console.log("get");

            return this._name;
        },
        set:function(v){
            console.log("set");
            //为了避免递归,添加_前缀,属性还是同一个属性
            this._name = v;
        }
    })

    //在name属性被写的时间点，调用了一个函数
    //钩子：系统自动调用的函数
    //写
    data.name = "666";

    //读
    console.log(data.name);

双向绑定原理

Object.defineProperty()方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

Demo:Object.defineProperty实现数据和视图的联动：

html:

<div>
    Object.defineProperty实现数据和视图的联动: <br>
    <span id="nickName"></span>
    <div id="introduce"></div>
</div>

js：（视图控制器）

var userInfo = {};
Object.defineProperty(userInfo,'nickName',{
    get:function(){
        return document.getElementById('nickName').innerHTML;
    },
    set:function(nick){
        document.getElementById('nickName').innerHTML = nick
    }
});
Object.defineProperty(userInfo,'introduce',{
    get:function(){
        return document.getElementById('introduce').innerHTML;
    },
    set:function(introduce){
        document.getElementById('introduce').innerHTML = introduce
    }
});
//console.log(userInfo)
userInfo.nickName = '我是nickName';
userInfo.introduce = '我是introduce'
//上面设置userInfo的nickName属性时会调用set方法，更新DOM节点的HTML