小編給大家分享一下vue.js核心的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司專注于為企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、商城網(wǎng)站建設(shè)，小程序定制開發(fā)，軟件按需設(shè)計(jì)網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

Vue.js是一個(gè)提供MVVM數(shù)據(jù)雙向綁定的庫，專注于UI層面，核心思想是：數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)。

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

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

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

  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

基于依賴收集的觀測(cè)機(jī)制原理：

1 將原生的數(shù)據(jù)改造成 “可觀察對(duì)象”，通常為，調(diào)用defineProperty改變data對(duì)象中數(shù)據(jù)為存儲(chǔ)器屬性。一個(gè)可觀察對(duì)象可以被取值getter，也可以被賦值setter。

2 在解析模板，也就是在watcher的求值過程中，每一個(gè)被取值的可觀察對(duì)象都會(huì)將當(dāng)前的watcher注冊(cè)為自己的一個(gè)訂閱者，并成為當(dāng)前watcher的一個(gè)依賴。

3 當(dāng)一個(gè)被依賴的可觀察對(duì)象被賦值時(shí)，它會(huì)通知notify所有訂閱自己的watcher重新求值，并觸發(fā)相應(yīng)的更新，即watcher對(duì)象中關(guān)聯(lián)的DOM改變渲染。

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

組件系統(tǒng)：

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

注冊(cè)一個(gè)組件：

Vue.component('my-component', {
    // 模板
    template: '
{{msg}} {{privateMsg}}
',
    // 接受參數(shù)
    props: {
        msg: String    
    },
    // 私有數(shù)據(jù)，需要在函數(shù)中返回以避免多個(gè)實(shí)例共享一個(gè)對(duì)象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})

組件的核心選項(xiàng)

1 模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。

2 初始數(shù)據(jù)（data）：一個(gè)組件的初始數(shù)據(jù)狀態(tài)。對(duì)于可復(fù)用的組件來說，這通常是私有的狀態(tài)。

3 接受的外部參數(shù)(props)：組件之間通過參數(shù)來進(jìn)行數(shù)據(jù)的傳遞和共享。

4 方法（methods）：對(duì)數(shù)據(jù)的改動(dòng)操作一般都在組件的方法內(nèi)進(jìn)行。

5 生命周期鉤子函數(shù)（lifecycle hooks）：一個(gè)組件會(huì)觸發(fā)多個(gè)生命周期鉤子函數(shù)，最新2.0版本對(duì)于生命周期函數(shù)名稱改動(dòng)很大。

6 私有資源（assets）：Vue.js當(dāng)中將用戶自定義的指令、過濾器、組件等統(tǒng)稱為資源。一個(gè)組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用。

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

其他特性：

1 異步批量DOM更新：當(dāng)大量數(shù)據(jù)變動(dòng)時(shí)，所有受到影響的watcher會(huì)被推送到一個(gè)隊(duì)列中，并且每個(gè)watcher只會(huì)推進(jìn)隊(duì)列一次。這個(gè)隊(duì)列會(huì)在進(jìn)程的下一個(gè) tick異步執(zhí)行。這個(gè)機(jī)制可以避免同一個(gè)數(shù)據(jù)多次變動(dòng)產(chǎn)生的多余DOM操作，也可以保證所有的DOM寫操作在一起執(zhí)行，避免DOM讀寫切換可能導(dǎo)致的layout。

2 動(dòng)畫系統(tǒng)：Vue.js提供了簡(jiǎn)單卻強(qiáng)大的動(dòng)畫系統(tǒng)，當(dāng)一個(gè)元素的可見性變化時(shí)，用戶不僅可以很簡(jiǎn)單地定義對(duì)應(yīng)的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數(shù)進(jìn)行更底層的動(dòng)畫處理。3 可擴(kuò)展性：除了自定義指令、過濾器和組件，Vue.js還提供了靈活的mixin機(jī)制，讓用戶可以在多個(gè)組件中復(fù)用共同的特性。

以上是“vue.js核心的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)頁名稱：vue.js核心的示例分析-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://weahome.cn/article/ijhsj.html