儲存根據流程圖來理一下實現乙個mvvm：
如上圖所示，我們可以看到，整體實現分為四步：
1、實現乙個compile，對指令進行解析，初始化檢視，並且訂閱資料的變更，繫結好更新函式
2、實現乙個observer，對資料進行劫持，通知資料的變化
3、實現乙個watcher，將其作為以上兩者的乙個中介點，在接收資料變更的同時，讓dep新增當前watcher，並及時通知檢視進行update。
4、實現mvvm，整合以上三者，作為乙個入口函式
流程解讀第三步：建立observer類進行資料劫持、深度遞迴劫持，當data中設定值或者修改值的時候，利用object.defineproperty對值進行監控。
第四步：建立watch類觀察者，用新值和老值進行比對，如果發生變化，就呼叫更新方法，進行檢視更新。
第五步：將輸入框v-model和檢視繫結起來，輸入框的值變化，同時頁面中通過}繫結的值也變化，實現雙向資料繫結。
Vue中資料雙向繫結的原理
es5方法 object.defineproperty 物件名,屬性名,配製物件 有兩個缺點 1 一次只能劫持乙個屬性,需要for in去遍歷物件 2 如果在劫持之後有新增了乙個屬性,那這個屬性是沒有被劫持的,需要額外進行劫持操作 for let key in data set value 新增屬性...
vue雙向資料繫結原理
vue應用的是mvvm框架，view和model分離，然後通過vm雙向資料繫結，div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結，是怎麼實現的呢，首先vue利用es5的defineproperty方法裡的get，set...
vue雙向資料繫結原理
text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...