保存
什么是雙向數據綁定？如何去實現？Observer，Compile，Watcher
代碼開發
2019-03-11 17:25:41
根據流程圖來理一下實現一個MVVM：
如上圖所示，我們可以看到，整體實現分為四步：
1、實現一個Compile，對指令進行解析，初始化視圖，並且訂閱數據的變更，綁定好更新函數
2、實現一個Observer，對數據進行劫持，通知數據的變化
3、實現一個Watcher，將其作為以上兩者的一個中介點，在接收數據變更的同時，讓Dep添加當前Watcher，並及時通知視圖進行update。
4、實現MVVM，整合以上三者，作為一個入口函數
流程解讀
第一步：創建MVVM、Compile類，並且利用createDocumentFragment將<div id="app"></div>下的標簽放到JS文檔碎片中去。
第二步：對 標簽 進行編譯，將帶有 v- 指令的標簽和{{ }}的標簽解析出來
第三步：創建Observer類進行數據劫持、深度遞歸劫持，當data中設置值或者修改值的時候，利用Object.defineProperty對值進行監控。
第四步：創建Watch類觀察者，用新值和老值進行比對，如果發生變化，就調用更新方法，進行視圖更新。
第五步：將輸入框v-model和視圖綁定起來，輸入框的值變化，同時頁面中通過{{}}綁定的值也變化，實現雙向數據綁定。
代碼比較粗糙，核心就是這些了。應該來說一定要掌握的，因為Vue,Watcher,Dep等都是大家非常熟悉的構造函數了，創造實例只是前面多了一個關鍵字 new。其他的平常都很熟悉了。