數(shù)據(jù)驅(qū)動：

Vue.js數(shù)據(jù)觀測原理在技術(shù)實現(xiàn)上，利用的是ES5Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機制。核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。

watcher：每一個指令都會有一個對應(yīng)的用來觀測數(shù)據(jù)的對象，叫做watcher，比如v-text="msg", {{ msg }}，即為兩個watcher，watcher對象中包含了待渲染的關(guān)聯(lián)DOM元素。

1 <div id="app"> 2 {{ message }} 3 </div> 4 var app = new Vue({ 5 el: '#app', 6 data: { 7 message: 'Hello Vue!' 8 } 9 })

基于依賴收集的觀測機制原理：

1 將原生的數(shù)據(jù)改造成 “可觀察對象”，通常為，調(diào)用defineProperty改變data對象中數(shù)據(jù)為存儲器屬性。一個可觀察對象可以被取值getter，也可以被賦值setter。 2 在解析模板，也就是在watcher的求值過程中，每一個被取值的可觀察對象都會將當(dāng)前的watcher注冊為自己的一個訂閱者，并成為當(dāng)前watcher的一個依賴。 3 當(dāng)一個被依賴的可觀察對象被賦值時，它會通知notify所有訂閱自己的watcher重新求值，并觸發(fā)相應(yīng)的更新，即watcher對象中關(guān)聯(lián)的DOM改變渲染。?

依賴收集的優(yōu)點在于可以精確、主動地追蹤數(shù)據(jù)的變化，不需要手動觸發(fā)或?qū)ψ饔糜蛑兴衱atcher都求值（angular臟檢查實現(xiàn)方式的缺點）。特殊的是，對于數(shù)組，需要通過包裹數(shù)組的可變方法（比如push）來監(jiān)聽數(shù)組的變化。在添加/刪除屬性，或是修改數(shù)組特定位置元素時，也需要調(diào)用特定的函數(shù)，如obj.$add(key, value)才能觸發(fā)更新。這是受ES5的語言特性所限。

組件系統(tǒng)：

應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

注冊一個組件：

1 Vue.component('my-component', {2 // 模板3 template: '<div>{{msg}} {{privateMsg}}</div>',4 // 接受參數(shù)5 props: {6 msg: String 7 },8 // 私有數(shù)據(jù)，需要在函數(shù)中返回以避免多個實例共享一個對象9 data: function () { 10 return { 11 privateMsg: 'component!' 12 } 13 } 14 }) 15 <my-component msg="hello"></my-component>

組件的核心選項

1 模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。 2 初始數(shù)據(jù)（data）：一個組件的初始數(shù)據(jù)狀態(tài)。對于可復(fù)用的組件來說，這通常是私有的狀態(tài)。 3 接受的外部參數(shù)(props)：組件之間通過參數(shù)來進(jìn)行數(shù)據(jù)的傳遞和共享。 4 方法（methods）：對數(shù)據(jù)的改動操作一般都在組件的方法內(nèi)進(jìn)行。 5 生命周期鉤子函數(shù)（lifecycle hooks）：一個組件會觸發(fā)多個生命周期鉤子函數(shù)，最新2.0版本對于生命周期函數(shù)名稱改動很大。 6 私有資源（assets）：Vue.js當(dāng)中將用戶自定義的指令、過濾器、組件等統(tǒng)稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用。

Webpack是一個開源的前端模塊構(gòu)建工具，它提供了強大的loader API來定義對不同文件格式的預(yù)處理邏輯，這是.vue后綴單文件組件形式的基礎(chǔ)。所以在此基礎(chǔ)上，尤大開發(fā)的vue-loader允許將模板、樣式、邏輯三要素整合在同一個文件中，以.vue文件后綴形成單文件組件格式，方便項目架構(gòu)和開發(fā)引用。

其他特性：

1 異步批量DOM更新：當(dāng)大量數(shù)據(jù)變動時，所有受到影響的watcher會被推送到一個隊列中，并且每個watcher只會推進(jìn)隊列一次。這個隊列會在進(jìn)程的下一個 tick異步執(zhí)行。這個機制可以避免同一個數(shù)據(jù)多次變動產(chǎn)生的多余DOM操作，也可以保證所有的DOM寫操作在一起執(zhí)行，避免DOM讀寫切換可能導(dǎo)致的layout。 2 動畫系統(tǒng)：Vue.js提供了簡單卻強大的動畫系統(tǒng)，當(dāng)一個元素的可見性變化時，用戶不僅可以很簡單地定義對應(yīng)的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數(shù)進(jìn)行更底層的動畫處理。 3 可擴(kuò)展性：除了自定義指令、過濾器和組件，Vue.js還提供了靈活的mixin機制，讓用戶可以在多個組件中復(fù)用共同的特性。

總結(jié)：

Vuejs學(xué)習(xí)曲線非常平緩，主要是文檔實在太優(yōu)秀了，旁證了設(shè)計師出身的程序員有多可怕。其輕量、高性能的特點，對于移動場景也有很好的契合。更重要的是，設(shè)計完備的組件系統(tǒng)和配套的構(gòu)建工具、插件，使得Vue.js在保留了其簡潔API的同時，也已經(jīng)完全有能力擔(dān)當(dāng)起復(fù)雜的大型應(yīng)用的開發(fā)。

本人構(gòu)建Vue WebApp技術(shù)棧：vuejs + vuex + vue-router + vue-resource + vux(UI庫) + webpack

以上

轉(zhuǎn)載于:https://www.cnblogs.com/albenxie-16/p/7660616.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Vue.js2.0核心思想的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。