核心
?Object.defineProperty()?方法
原理
通過?Object.defineProperty()?來劫持各個屬性的?setter?， ?getter?，在數(shù)據(jù)發(fā)生變動時通
知Vue實例，觸發(fā)相應(yīng)的?getter?和?setter?回調(diào)函數(shù)。
當(dāng)把一個普通 Javascript 對象傳給Vue 實例來作為它的 data 選項時， Vue 將遍歷它的屬性，用 ?Object.defineProperty? 將
它們轉(zhuǎn)為 ?getter/setter?。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
特點
Vue的數(shù)據(jù)雙向綁定將MVVM作為數(shù)據(jù)綁定的入口，整合Observer， Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間
的通信橋梁，達到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input） —>數(shù)據(jù)model變更雙向綁定效果。
這就是通過數(shù)據(jù)劫持和發(fā)布-訂閱者功能來實現(xiàn)的.
js的簡單實現(xiàn)
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
