Vue資料雙向繫結原理
先看效果圖
//程式碼： <div id="app"> <input v-model="name" type="text"> <h1>{{name}}</h1> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js/index.js"></script> <script> const vm = new Mvue({ el: "#app", data: { name: "我是摩登" } }); </script>
在說到資料的雙線繫結前先熟悉下MVVM
什麼是MVVM
MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表資料模型，也可以在 Model 中定義資料修改和操作的業務邏輯；View 代表 UI 元件，它負責將資料模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的物件。
在 MVVM 架構下，View 和 Model 之間並沒有直接的聯絡，而是通過 ViewModel 進行互動，Model 和 ViewModel 之間的互動是雙向的， 因此 View 資料的變化會同步到 Model 中，而 Model 資料的變化也會立即反應到 View 上。
ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來，而 View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作 DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。
分析
我們都知道MVVM模式在於資料和檢視層的同步,也就是說當檢視層發生變化時資料也將發生變化.當資料發生變化時檢視也會發生改變
檢視成發生變化時我們可以通過事件監聽即可
資料發生改變通知檢視成方法
正題來了
當我們資料方式改變時我們可以通過 Object.defineProperty 自動觸發set函式從而能夠通知我們跟新檢視.
資料雙向繫結的原理
結合上面的分析我們可以得出Vue資料雙向繫結是通過資料劫持結合* 釋出訂閱者模式 類實現的,我們也知道 資料劫持 * 是通過Object.defineProperty 方法,當我們知道這些後我們就需要一個監聽器 Observer 來監聽屬性的變化,得知屬性的變化後我們就需要一個Watcher 訂閱者來更新檢視,然後我們還需要一個compile 指令解析器,原來解析我們的節點元素的* 指令 * 和 * 初始化檢視 *
Observer 監聽器：用來監聽屬性的變化通知訂閱者
Watcher 訂閱者：收到屬性的變化，然後更新檢視
Compile 解析器：解析指令，初始化模版，繫結訂閱者
