一：Vue中的元件的data 為什麼是一個函式？

核心答案：

每次使用元件時都會對元件進行例項化操作，並且呼叫data函式返回一個物件作為元件的資料來源。這樣可以保證多個元件間資料互不影響。

如果data是物件的話，物件屬於引用型別，會影響到所有的例項。所以為了保證元件不同的例項之間data不衝突，data必須是一個函式。

原始碼地址：src/core/util/options 121

二：Vue 元件間通訊有哪幾種方式？

核心答案：

Vue 元件間通訊只要指以下 3 類通訊：父子元件通訊、隔代元件通訊、兄弟元件通訊，下面我們分別介紹每種通訊方式且會說明此種方法可適用於哪類元件間通訊。

1、props / $emit適用父子元件通訊這種方法是 Vue 元件的基礎，相信大部分同學耳聞能詳，所以此處就不舉例展開介紹。

2、ref與$parent / $children適用 父子元件通訊

　　1）ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件例項

　　2）$parent /$children：訪問父 / 子例項

3、EventBus （$emit / $on）適用於父子、隔代、兄弟元件通訊

　　這種方法通過一個空的 Vue 例項作為中央事件匯流排（事件中心），用它來觸發事件和監聽事件，從而實現任何元件間的通訊，包括父子、隔代、兄弟元件。

4、$attrs/$listeners適用於隔代元件通訊

　　1）$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性繫結 ( class 和 style 除外 )。當一個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 ( class 和 style 除外 )，並且可以通過 v-bind="$attrs"傳入內部元件。通常配合 inheritAttrs 選項一起使用。

　　2）$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners"傳入內部元件

5、provide / inject適用於隔代元件通訊

　　祖先元件中通過 provider 來提供變數，然後在子孫元件中通過 inject 來注入變數。provide / inject API 主要解決了跨級元件間的通訊問題，不過它的使用場景，主要是子元件獲取上級元件的狀態，跨級元件間建立了一種主動提供與依賴注入的關係。

6、Vuex 適用於父子、隔代、兄弟元件通訊

　　Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。每一個 Vuex 應用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應用中大部分的狀態 ( state )。

三：元件中寫 name選項有哪些好處及作用？

核心答案：

1) 可以通過名字找到對應的元件（ 遞迴元件 ）

2) 可以通過name屬性實現快取功能(keep-alive)

3) 可以通過name來識別元件（跨級元件通訊時非常重要）

Vue.extend = function () {
    if(name) {
        Sub.options.componentd[name] = Sub
    }
}

原始碼地址：src/core/vdom/create-element.js 111

四：keep-alive平時在哪裡使用？原理是？

核心答案：

keep-alive 主要是元件快取，採用的是LRU演算法。最近最久未使用法。

常用的兩個屬性include/exclude，允許元件有條件的進行快取。

兩個生命週期activated/deactivated，用來得知當前元件是否處於活躍狀態。

abstract: true, // 抽象元件 
props:{
    include: patternTypes,  // 要快取的有哪些
    exclude: patternTypes, // 要排除的有哪些
    max: [String, Number] //最大快取數量 
}
if(cache[key]) { // 通過key 找到快取，獲取例項
    vnode.componentInstance = cache[key].componentInstance
    remove(keys, key) //將key刪除掉 
    keys.push(key) // 放到末尾 
} else {
    cache[key] = vnode // 沒有快取過 
    keys.push(key) //儲存key
    if(this.max && keys.length > parseInt(this.max)) { // 如果超過最大快取數 
    // 刪除最早快取的 
    pruneCacheEntry(cache, keys[0], keys, this._vnode)
}
}
vnode.data.keepAlive = true // 標記走了快取 

五：Vue.minxin的使用場景和原理？

核心答案：

Vue.mixin的作用就是抽離公共的業務邏輯，原理類似“物件的繼承”，當元件初始化時會呼叫 mergeOptions方法進行合併，採用策略模式針對不同的屬性進行合併，如果混入的資料和本身元件中的資料衝突，會採用“就近原則”以元件的資料為準。

補充回答：

mixin中有很多缺陷“命名衝突問題”，“依賴問題”，“資料來源問題”，這裡強調一下mixin的資料是不會被共享的。

原始碼地址：src/core/util/options.js