从Vue数据双向绑定认识Object.defineProperty()

1.简单应用es5中的Object.defineProperty()？

var book = {
    _year: 2004,
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2005;  //在设置year的同时，已经调用了set方法
alert(book.edition); //2 ，在获取edition之前，已经调用了get方法

以上都是摘自js高级程序设计书上第六章的讲解，最开始看的时候觉得奇奇怪怪的，不太懂这些看起来很底层的方法有什么用。

　　现在明白了，一个对象book，有个属性year，但是如果让用户随便一个book.year=-1;这样的话可不好啊，于是乎，book定义的year前面加了个_，表示是私有的，对于用户来说也不会知道有这么个变量，用户只会知道year，Object.defineProperty里面定义了“year”这个属性，也就是说，如果用户book.year，那么一般会返回对应的值，这里就会调用get函数，返回去的是_year值，用户来看就是book.year返回了2004，实际上内部用了get函数返回的是_year值；如果用户book.year=2017；那么实际上调用了set函数，将_year改成2017，这样用户再调用book.year就是2017了。

2.为什么非得加个get和set函数呢？

　　因为，这样增加了判断，如果set值为-1这样不是正常年份的值，那么就可以报错或者其他的，不让用户设置成功。

同时也避免了用户不小心设置错了值的情况。

3.双向绑定的原理？

数据双向绑定就是实现从Vue中的data数据到视图元素之间数据的相互转化：

从视图到data，在元素身上比如input元素上绑定input或者change事件，当其中的值改变时，自动更新到data属性中
从data中到视图层则是使用es5中的Object.definedProperty("object","object.key",{})，其有两个重要的属性，当改变了其中对象的属性值时，自动会调用set函数，在这个set函数中，调用相应的函数将数据插入到视图层中去即可，使用了这个属性后，外部属性和内部会做一个封装，外部传入了错误的数值也会进行过滤，示例代码请查看上方示例代码

参考链接（讲解的）：https://www.cnblogs.com/libin-1/p/6893712.html

从Vue数据双向绑定认识Object.defineProperty()

猜你喜欢