前言

    vue.js是一套構建使用者介面的漸進式框架，vue.js的目標是通過儘可能簡單的API實現響應的資料繫結和組合的檢視元件。

    vue通過DOM事件操作和指令來進行檢視層和模型層的相互通訊，會為每一處需要動態更新的DOM節點建立一個指令物件。每當一個指令物件觀測的資料變化時，它便會對所繫結的目標節點執行相應的DOM操作。基於指令的資料繫結使得具體的DOM操作都被合理地封裝在指令定義中，業務程式碼只需要涉及模板和對資料狀態的操作即可，這使得應用的開發效率和可維護性都大大提升。

    因此，資料繫結，元件是整個vue的核心。響應的資料繫結就是資料驅動檢視的概念。它讓你在寫 Web 應用介面時，只需要關注兩件事：資料如何展示和資料如何變化。一旦資料發生變化時，比如使用者輸入，或者 ajax 請求返回後資料發現修改，對應的檢視介面會自動的進行更新。

 原理

    vue.js是MVVM的架構，如圖：

 

    從圖中可以看出檢視層和模型層的相互傳遞，通過使用者操作來繫結一些DOM事件來重新渲染到檢視層。具體的內部架構如下圖：

 

 開始

一、 資料繫結：

    實現方式：資料繫結即是檢視層和模型層的雙向繫結。即資料的改變驅動了檢視的自動更新。  

    通過ViewModel控制，修改資料，從而控制View的展示，實現MVVM的思想。

 

    裡面的兩個屬性getter和setter，在這兩個函式內部實現依賴的收集和觸發，而且完美支援巢狀的物件結構。對於陣列，則通過包裹陣列的可變方法（比如push）來監聽陣列的變化。這使得操作Vue.js的資料和操作原生物件幾乎沒有差別。

• Obejct.defineProperty 【提供getter 和 setter】
• Observer 【提供getter 和 setter】—— 訂閱者模式，一個目標物件管理所有相依於它的觀察者物件，並且在它本身的狀態改變時主動發出通知，用來實時事件處理系統。
• watcher 【提供getter 和 setter】 —— 模板和 Observer 物件結合在一起的紐帶
• Dep 【負責收集watcher】
• Directive 【處理Vue模板指令】

    observe -> 觸發setter -> watcher -> 觸發update -> Directive -> 觸發update -> 指令（如上圖流程所示）

<span>Hello, this is {{name}}</span>
<script>
var app = new Vue({
    el : '#app',
    data : {
        name: 'i3yuan'
    }
})

</script>

相關推薦