VUE雙向數據綁定原理

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根據指令重新渲染