03 vue訂閱者模式原理(理解VUE2雙向數據綁定原理和實現)

行深度比較，一旦發現有屬性發生變化，則重新渲染與之綁定的DOM節點。

最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，angular觸發時進入臟值檢測。但只限 指定的事件 (如：用戶點擊，輸入操作，ajax請求，setInterval，setTimeout等...)，否則需手動調用 apply 函數去強制執行一次臟檢查。

數據劫持 : vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter ， getter 在數據變動時發布消息給訂閱者，觸發相應的監聽回調，而產生更新數據和視圖。

原理圖告訴我們，data屬性定義了getter、setter對屬性進行劫持，當屬性值改變是就會notify通知watch對象，而watch對象則會重新觸發組件呈現功能，繼而更新view上的DOM節點樹。

反之，view上輸入數據時，也會觸發data變更，也會觸發訂閱者watch更新,這樣子model數據就可以實時更新view上的數據變化。這樣一個過程就是vue的數據雙向綁定了。

vue是通過數據劫持的方式來做數據綁定的，其中最核心的方法便是通過 Object.defineProperty() 來實現對屬性的劫持，達到監聽數據變動的目的。

Object.defineProperty 是ES5一個方法，可以直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性，并返回這個對象，對象里目前存在的屬性描述符有兩種主要形式： 數據描述符 和 存取描述符 。

數據描述符 是一個擁有可寫或不可寫值的屬性。

存取描述符 是由一對getter-setter函數功能來描述的屬性。

描述符必須是兩種形式之一；不能同時是兩者。即：有值和可寫，或者可get和set

屬性描述符包括：

我們已經知道怎么實現數據的雙向綁定，首先要對數據進行劫持監聽，所以我們需要設置一個監聽器 Observer ，用來監聽所有屬性。如果屬性發上變化了，就需要告訴訂閱者 Watcher 看是否需要更新。因為訂閱者是有很多個，所以我們需要有一個消息訂閱器 Dep 來專門收集這些訂閱者，然后在監聽器 Observer 和訂閱者 Watcher 之間進行統一管理的。接著，我們還需要有一個指令解析器 Compile ，對每個節點元素進行掃描和解析，將相關指令對應初始化成一個訂閱者 Watcher ，并替換模板數據或者綁定相應的函數，此時當訂閱者 Watcher 接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。

因此接下去我們執行以下4個步驟，實現數據的雙向綁定：

深入響應式原理

剖析Vue原理&實現雙向綁定MVVM

《響應式系統的基本原理》.js

JavaScript實現MVVM之我就是想監測一個普通對象的變化

能說說vue的響應式原理嗎？

Vue 是一個 MVVM 框架，核心是雙向數據綁定，VM（視圖模型）是作為 V（視圖） 和 M（模型）的橋梁。下面是對 Vue 響應式（雙向數據綁定）的理解，如果錯誤盡請指出，一起交流，共同進步。

Vue響應式原理核心是 數據劫持，采用 ES5 的 object.defineproperty 的 getter 和 setter 方法。從一個例子出發：

首先，在Vue初始化階段，通過 observer 對 data 中的屬性進行遞歸的劫持，包括 name、job_ undergo、a、b等

在 get階段也就是初始化視圖時，為每一個劫持的屬性分配一個 依賴收集器，主要收集當前屬性的觀察者對象，例子中 name 屬性在模板中有兩處被使用，那么 name 屬性的依賴收集器中就存放兩個觀察者對象

當點擊按鈕時，將 name 修改為 lisi 時，會觸發 observer 的 setter 函數，將 value 更新為 lisi 最新值，然后通知依賴收集器數據發生了更新。

依賴收集就是發布訂閱模式，依賴收集器會通知所有的觀察者對象，當前name 屬性有兩個觀察者對象。

觀察者對象調用對應的回調函數進行相關的處理和DOM更新

以上是純響應式原理的分析和總結，下面配一張流程圖：

很赞哦!（394）