Vue實現雙向綁定，手寫一個minivue

 

1. Vue快速入門

   寫了簡單的數據雙向綁定

2. MVVM架構

   架構模型

   Model - view- viewModel

 

3. 編寫MVVM架構-聲明MVVM類

 

4. 聲明TemplateComplier類

模板引擎

   準備工做

   解析指令

      -把模板放入內存中去

      -解析表達式

        V-model

        V-text

雙向綁定

5.  編譯模板-把模板放入緩存

6.  編譯模板-v-text指令解析

7.  編譯模板-v-model指令解析

8.  編譯模板-表達式解析

 

9. 雙向綁定-視圖到模型

視圖-> 模型（觀察者模式，加事件）

模型-> 視圖（發佈-訂閱模式）

10. 雙向綁定-添加訂閱者

 發佈-訂閱模式

  --肯定訂閱者

 

給text和model都加上訂閱者

 

11. 雙向綁定-數據挾持準備

 發佈-訂閱模式

  --肯定訂閱者

  --使用發佈者管理

12.  雙向綁定-添加發布

雙向綁定的原理解釋以下：

ue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定 將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。