computed 和 watch 的區別和運用的場景？

computed： 是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；

watch： 更多的是「觀察」的做用，相似於某些數據的監聽回調 ，每當監聽的數據變化時都會執行回調進行後續操做；

運用場景：

• 當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；
• 當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch，使用 watch 選項容許咱們執行異步操做 ( 訪問一個 API )，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

在哪一個生命週期內調用異步請求？

能夠在鉤子函數 created、beforeMount、mounted 中進行調用，由於在這三個鉤子函數中，data 已經建立，能夠將服務端端返回的數據進行賦值。可是本人推薦在 created 鉤子函數中調用異步請求，由於在 created 鉤子函數中調用異步請求有如下優勢：

• 能更快獲取到服務端數據，減小頁面 loading 時間；
• ssr 不支持 beforeMount 、mounted 鉤子函數，因此放在 created 中有助於一致性；

Vue 組件間通訊有哪幾種方式？

Vue 組件間通訊是面試常考的知識點之一，這題有點相似於開放題，你回答出越多方法固然越加分，代表你對 Vue 掌握的越熟練。Vue 組件間通訊只要指如下 3 類通訊：父子組件通訊、隔代組件通訊、兄弟組件通訊，下面咱們分別介紹每種通訊方式且會說明此種方法可適用於哪類組件間通訊。

（1）props / $emit 適用 父子組件通訊

這種方法是 Vue 組件的基礎，相信大部分同窗耳聞能詳，因此此處就不舉例展開介紹。

（2）ref 與 $parent / $children 適用 父子組件通訊

• ref：若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例
• $parent / $children：訪問父 / 子實例

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

這種方法經過一個空的 Vue 實例做爲中央事件總線（事件中心），用它來觸發事件和監聽事件，從而實現任何組件間的通訊，包括父子、隔代、兄弟組件。

（4）$attrs/$listeners 適用於 隔代組件通訊

• $attrs：包含了父做用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定 ( class 和 style 除外 )，而且能夠經過 v-bind="$attrs" 傳入內部組件。一般配合 inheritAttrs 選項一塊兒使用。
• $listeners：包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件

（5）provide / inject 適用於 隔代組件通訊

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

（6）Vuex 適用於 父子、隔代、兄弟組件通訊

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

• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
• 改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化。

vue-router 路由模式有幾種？

vue-router 有 3 種路由模式：hash、history、abstract，對應的源碼以下所示：

switch (mode) {
  case 'history':
    this.history = new HTML5History(this, options.base)
    break
  case 'hash':
    this.history = new HashHistory(this, options.base, this.fallback)
    break
  case 'abstract':
    this.history = new AbstractHistory(this, options.base)
    break
  default:
    if (process.env.NODE_ENV !== 'production') {
      assert(false, `invalid mode: ${mode}`)
    }
}
複製代碼

其中，3 種路由模式的說明以下：

• hash: 使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
• history : 依賴 HTML5 History API 和服務器配置。具體能夠查看 HTML5 History 模式；
• abstract : 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式.