vue.js的兩個核心是什麼

Vue.js是一個提供MVVM資料雙向綁定的函式庫，專注於UI層面，核心概念是：資料驅動、元件系統。

資料驅動：

Vue.js資料觀測原理在技術實作上，利用的是ES5Object.defineProperty和記憶體屬性: getter和setter（所以只相容於IE9以上版本），可稱為基於依賴收集的觀測機制。核心是VM，即ViewModel，確保資料和視圖的一致性。

watcher：每個指令都會有一個對應的用來觀測資料的對象，叫做watcher，例如v-text="msg", {{ msg }}，即為兩個watcher，watcher對像中包含了待渲染的關聯DOM元素。

<div>
  {{ 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></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機制，讓使用者可以在多個元件中重複使用共同的特性。

以上是vue.js的兩個核心是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！