vue双向数据绑定

知识点 {:&.flexbox.vleft}

• Object.defineProperty()介绍
• vue双向数据绑定原理

Object.defineProperty()介绍 {:&.flexbox.vleft}

• 概念 : Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
• 语法 : Object.defineProperty(对象, 属性, 属性的描述)
• 属性的描述
  • value : 该属性对应的值.
  • configurable : 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，也能够被删除。默认为 false。
  • enumerable 当且仅当该属性的 enumerable 为 true 时，该属性才能够出现在对象的枚举属性中。默认为 false。
  • writable 当且仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变。默认为 false。

vue双向数据绑定原理 {:&.flexbox.vleft}

• 数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

    function defineReactive(data, key, val) {
        //observe(val); // 监听子属性
        Object.defineProperty(data, key, {
            enumerable: true, // 可枚举
            configurable: false, // 不能再define
            get: function() {
                return val;
            },
            set: function(newVal) {
                console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
                val = newVal;
            }
        });
    }