知识点 {:&.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;
}
});
}
