Vue.js是一個提供MVVM數據雙向綁定的庫,專注於UI層面,核心思想是:數據驅動、組件系統。
數據驅動:
Vue.js數據觀測原理在技術實現上,利用的是ES5的Object.defineProperty和存儲器屬性: getter和setter(所以只兼容IE9及以上版本),可稱爲基於依賴收集的觀測機制。核心是VM,即ViewModel,保證數據和視圖的一致性。
watcher:每一個指令都會有一個對應的用來觀測數據的對象,叫做watcher,比如v-text="msg", {{ msg }},即爲兩個watcher,watcher對象中包含了待渲染的關聯DOM元素。
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
基於依賴收集的觀測機制原理:
1 將原生的數據改造成 “可觀察對象”,通常爲,調用defineProperty改變data對象中數據爲存儲器屬性。一個可觀察對象可以被取值getter,也可以被賦值setter。 2 在解析模板,也就是在watcher的求值過程中,每一個被取值的可觀察對象都會將當前的watcher註冊爲自己的一個訂閱者,併成爲當前watcher的一個依賴。 3 當一個被依賴的可觀察對象被賦值時,它會通知notify所有訂閱自己的watcher重新求值,並觸發相應的更新,即watcher對象中關聯的DOM改變渲染。
依賴收集的優點在於可以精確、主動地追蹤數據的變化,不需要手動觸發或對作用域中所有watcher都求值(angular髒檢查實現方式的缺點)。特殊的是,對於數組,需要通過包裹數組的可變方法(比如push)來監聽數組的變化。在添加/刪除屬性,或是修改數組特定位置元素時,也需要調用特定的函數,如obj.$add(key, value)才能觸發更新。這是受ES5的語言特性所限。
組件系統:
應用類UI可以看作全部是由組件樹構成的。
註冊一個組件:
Vue.component('my-component', {
// 模板
template: '<div>{{msg}} {{privateMsg}}</div>',
// 接受參數
props: {
msg: String
},
// 私有數據,需要在函數中返回以避免多個實例共享一個對象
data: function () {
return {
privateMsg: 'component!'
}
}
})
<my-component msg="hello"></my-component>
組件的核心選項
1 模板(template):模板聲明瞭數據和最終展現給用戶的DOM之間的映射關係。 2 初始數據(data):一個組件的初始數據狀態。對於可複用的組件來說,這通常是私有的狀態。 3 接受的外部參數(props):組件之間通過參數來進行數據的傳遞和共享。 4 方法(methods):對數據的改動操作一般都在組件的方法內進行。 5 生命週期鉤子函數(lifecycle hooks):一個組件會觸發多個生命週期鉤子函數,最新2.0版本對於生命週期函數名稱改動很大。 6 私有資源(assets):Vue.js當中將用戶自定義的指令、過濾器、組件等統稱爲資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。
Webpack是一個開源的前端模塊構建工具,它提供了強大的loader API來定義對不同文件格式的預處理邏輯,這是.vue後綴單文件組件形式的基礎。所以在此基礎上,開發的vue-loader允許將模板、樣式、邏輯三要素整合在同一個文件中,以.vue文件後綴形成單文件組件格式,方便項目架構和開發引用。
其他特性:
1 異步批量DOM更新:當大量數據變動時,所有受到影響的watcher會被推送到一個隊列中,並且每個watcher只會推進隊列一次。這個隊列會在進程的下一個 tick異步執行。這個機制可以避免同一個數據多次變動產生的多餘DOM操作,也可以保證所有的DOM寫操作在一起執行,避免DOM讀寫切換可能導致的layout。 2 動畫系統:Vue.js提供了簡單卻強大的動畫系統,當一個元素的可見性變化時,用戶不僅可以很簡單地定義對應的CSS Transition或Animation效果,還可以利用豐富的JavaScript鉤子函數進行更底層的動畫處理。 3 可擴展性:除了自定義指令、過濾器和組件,Vue.js還提供了靈活的mixin機制,讓用戶可以在多個組件中複用共同的特性。