VUE借助Object.defineproperty()劫持对象的set个get方法实现了数据的双向绑定。
看看这个简单的demo:
var keyValue = 1;
var observeObj = {};
// param1:劫持的对象; param2: 需要劫持的key值; param3: 对象属性描述配置;
Object.defineproperty(observeObj,'key',{
enumberable:true,//可枚举
configurable:true,//能否通过delete删除属性从而重新定义属性
set:function(newValue){ keyValue = newValue },// observeObj.key绑定keyValue
get:function(){ return keyValue } //keyValue 绑定observeObj.key
});
observeObj.key = 2;
console.log(keyValue ) // 2
keyValue = 'new Value'
console.log(observeObj.key) // 'new Value'
vue三大件:observe观测data对象数据,data改变通知watcher,watcher通知compile根据指令重新渲染