1 概述
2 mvvm，model-view-viewmodel
3 雙向資料繫結
4 監聽 dom 改變
5 監聽模型資料變化，資料劫持
6 觀察者模式，observer
js 幾個流行的框架 vuejs、ember.js、angularjs 都使用 mvvm 模式，該模式叫做檢視模型雙向資料繫結，以達到資料和檢視快速同步的目的。本文就對其中涉及的原理部分加以說明（後續還有一篇模擬 實現）。主要體現就是表單元素值變，js變數值改變，若頁面上有輸出，輸出值也改變，典型的**如下， 上提供的例子：
new vue(})
效果：
先從什麼是 mvvm 說起。
mvvm 拆開來是 model-view-viewmodel，view，viewmodel，model 三部分組成，它是一種前端開發的架構模式。
如圖所示：
在 mvvm 的架構下，view 層（dom展示層）和 model 層（資料物件層）並沒有直接聯絡，而是通過 viewmodel 層進行互動。viewmodel 層通過雙向資料繫結將 view 層和 model 層連線了起來，使得 view 層和 model 層的同步工作完全是自動的。
因此開發者只需關注業務邏輯，無需手動操作 dom，複雜的資料狀態維護交給 mvvm 統一來管理，稱之為資料驅動的開發方法。
就是指資料的傳遞有兩個方向：
若要實現以上的資料傳遞，我們需要去監聽資料變化和檢視的變化，才能做出相應改變。
監聽 dom 檢視的改變是為了更新模型。我們通過 dom 事件就可以實現監聽檢視的改變，典型的 input 的 change、input 事件都可以完成監聽，通過事件處理器，實現對應的模型的資料改變。
前面例子中的 input 元素的值的不斷改變，就是 dom 的改變，我們監聽到之後，將模型變數 message 做同步更改！就是檢視改變傳遞到了模型上。
那麼為什麼頁面的展示也變了呢？就是下乙個傳遞了。模型改變傳遞到檢視上。資料的改變傳遞到檢視上如何實現的呢？就是監聽資料實現的。
如何做到 message 模型變數的變化我們可以監聽到呢？其實是利用的 js 中物件屬性修改的特殊 get、set 方法實現的，示例**如下：
var o = {}; // 建立乙個新物件
// 在物件中新增乙個屬性與訪問描述符的示例
var messagevalue;
object.defineproperty(o, "message", ,
set : function(newvalue),
});
以上的**，在設計上稱之為：資料劫持。這個設計也是 mvvm 的核心原理之一。
關於object.defineproperty大家可以參考：object.defineproperty。除此之外 es6 的 proxy 也可以完成此項功能。據稱 vue3 就會使用 proxy 代替 defineproperty。
真正實現時，往往乙個模型的變化，需要更新好多檢視部分，因此設計時，通常會選用觀察者模式。
觀察者模式（也叫模型 model - 檢視 view 模式、源 source - 收聽者 listener 模式或從屬者模式）是設計模式的一種。在此模式中，乙個目標物件管理所有依賴它的觀察者物件，並且在本身的狀態改變時發出通知。也就是本例中，模型就是目標物件，而所需要更新的各種檢視dom就是觀察者。
以上就是 mvvm 和 其中涉及的關鍵原理概念。另一篇 mvvm 雙向資料繫結之基礎實現，通過**展示如何實現 mvvm 模式。
vue 雙向繫結資料的原理
vue能做到雙向繫結資料靠的就是object.defineproperty 俗稱屬性 例如 平時我們定義乙個引數 是這樣的 var book console.log book.name 一般的引數 但是你想在輸出的同時對引數進行一些操作 var book var name object.define...
1120 MVVM框架是如何實現雙向資料繫結剖析。
思路 1.model影響檢視 編譯時註冊watcher，在註冊watcher，呼叫get，通過observer資料劫持get方法,將多個觀察者統一管理起來。當改變資料時，呼叫set方法，將收攏的對應觀察者的upadte方法更新。2.檢視影響model 編譯時註冊wather，node節點繫結對應的事...
2 Angular的雙向資料繫結 MV VM
angular的核心mvvm，下面來看看mv 資料到檢視 執行上面 我們使用settimeout延遲兩秒去更新資料 m 我們的檢視 v 並沒有發生改變。其實資料確實發生改變了，但是我們的檢視 v 並沒有及時重新整理，原因是原生的settimeout不具備重新整理的功能。angular為我們提供了se...