vue.js利用Object.defineProperty实现双向绑定

Object.defineProperty的使用

几行代码看他怎么用

var a= {}
Object.defineProperty(a,"b",{
 value:123
})
console.log(a.b);//123

很简单，它接受三个参数，而且都是必填的。。

传入参数

第一个参数：目标对象
第二个参数：需要定义的属性或方法的名字。
第三个参数：目标属性所拥有的特性。（descriptor）

前两个参数不多说了，一看代码就懂，主要看第三个参数descriptor，看看有哪些取值

descriptor

他又以下取值，我们简单认识一下，后面例子，挨个介绍。

value：属性的值(不用多说了)
writable：如果为false，属性的值就不能被重写,只能为只读了
configurable：总开关，一旦为false，就不能再设置他的（value，writable，configurable）
enumerable：是否能在for…in循环中遍历出来或在Object.keys中列举出来。
get：一会细说
set：一会细说

descriptor 默认值

我们再看看第一个例子

var a= {}
Object.defineProperty(a,"b",{
 value:123
})

console.log(a.b);//123
我们只设置了 value，别的并没有设置，但是第一次的时候 可以简单的理解为（暂时这样理解）它会默认帮我们把writable，configurable，enumerable。都设上值，而且值还都是false。。也就是说，上面代码和下面是等价的的（仅限于第一次设置的时候）。

var a= {}
Object.defineProperty(a,"b",{
 value:123,
 writable:false,
 enumerable:false,
 configurable:false
})

console.log(a.b);//123
以上非常重要哦。。并且以上理解对set 和 get 不起作用哦

configurable

总开关，第一次设置 false 之后，，第二次什么设置也不行了，比如说

var a= {}
Object.defineProperty(a,"b",{
 configurable:false
})
Object.defineProperty(a,"b",{
 configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

就会报错了。

注意上面讲的默认值。。。如果第一次不设置它会怎样。。会帮你设置为false。。所以。。第二次。再设置他会怎样？。。对喽，，会报错

writable

如果设置为fasle，就变成只读了。

var a = {}; 

Object.defineProperty(o, "b", { 
 value : 123,
 writable : false });

console.log(a.b); // 打印 37
a.b = 25; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
console.log(o.a); // 打印 37， 赋值不起作用。

enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

改为false

var a= {}
Object.defineProperty(a,"b",{
 value:3445,
 enumerable:false //注意咯这里改了
})
console.log(Object.keys(a));// 打印[]

get和set
使用defineProperty()方法为obj定义name属性，代码如下：
这个name属性为访问器属性，它是对象的特殊属性，不能在对象中直接设置，必须通过defineProperty()方法设置。

var obj = {};
    Object.defineProperty(obj,"name",{
        get:function(){
            console.log("get方法被调用了");
            return name;
        },
        set:function(val){
            name = val;
            console.log("set方法被调用了，参数是"+val);
        }
    });
    obj.name="张三";
    console.log(obj.name);

代码执行结果为：

obj.name=”张三”，为属性赋值，就是调用set函数，赋值就是进行传参。
console.log(obj.name)，读取属性，就是调用get方法，读取的值就是get函数的返回值

简单双向绑定的实现

<input type="text" id="text">
<p id="show"></p>
<script>
    var obj = {};
    Object.defineProperty(obj,"name",{
        get:function(){
            return name;
        },
        set:function(value){
            document.getElementById("text").value = value;
            document.getElementById("show").innerHTML = value;
        }
    });
    var input = document.getElementById("text");
    input.addEventListener("input",function(event){
        var text = event.target.value;
        obj.name = text;
    });
</script>

随着文本输入框文字的变化，p元素中会显示相同的文字内容。实现了model=>view的绑定。
在控制台修改obj.name，视图会相应更新。实现了view=>model的绑定。

实现双向绑定要实现的几点
第一点：对数据进行劫持监听，设置一个数据监听器Observer，用来监听所有属性，如果有属性发生变化，就通知订阅者。
第二点：设置一个订阅者Watcher，订阅者可以收到属性的变化通知，从而执行相应的函数，来进行视图更新。
第三点：设置一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
第四点：入口函数。

图片说明：因为存在多个订阅者，所以需要一个消息订阅器Dep来专门收集这些订阅者。
第一点说明：利用Object.defineProperty()来监听属性变动，为每一个属性添加setter和getter，一旦属性发生改变，触发setter，就能监听到数据变化。
第二点说明：订阅者Watcher是Observer和Compile之间通信的桥梁。
第三点说明：Compile实现步骤：
解析模板指令，并替换模板数据，初始化视图；
将模板指令对应的节点绑定对应的更新函数，添加监听数据的订阅者，一旦数据发生变化，则更新视图。