Vue面試中，常常會被問到的面試題/知識點(2019改進版)

時間 2019-11-06

原文原文鏈接

在初版的基礎上進行了優化，新增一些面試題/知識點，對一些知識點進行更加深刻的描述。javascript

1、對於MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫。
Model表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。
View 表明UI 組件，它負責將數據模型轉化成UI 展示出來。
ViewModel 監聽模型數據的改變和控制視圖行爲、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，鏈接Model和View。
在MVVM架構下，View 和 Model 之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的，所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。
ViewModel 經過雙向數據綁定把 View 層和 Model 層鏈接了起來，而View 和 Model 之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM, 不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由 MVVM 來統一管理。css

MVVM的優缺點?
優勢:
分離視圖（View）和模型（Model）,下降代碼耦合，提升視圖或者邏輯的重用性: 好比視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定不一樣的"View"上，當View變化的時候Model不能夠不變，當Model變化的時候View也能夠不變。你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯
提升可測試性: ViewModel的存在能夠幫助開發者更好地編寫測試代碼
自動更新dom: 利用雙向綁定,數據更新後視圖自動更新,讓開發者從繁瑣的手動dom中解放
缺點:
Bug很難被調試: 由於使用雙向綁定的模式，當你看到界面異常了，有多是你View的代碼有Bug，也多是Model的代碼有問題。數據綁定使得一個位置的Bug被快速傳遞到別的位置，要定位原始出問題的地方就變得不那麼容易了。另外，數據綁定的聲明是指令式地寫在View的模版當中的，這些內容是沒辦法去打斷點debug的
一個大的模塊中model也會很大，雖然使用方便了也很容易保證了數據的一致性，當時長期持有，不釋放內存就形成了花費更多的內存
對於大型的圖形應用程序，視圖狀態較多，ViewModel的構建和維護的成本都會比較高。html

2、Vue的生命週期

beforeCreate（建立前）在數據觀測和初始化事件還未開始
created（建立後）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性尚未顯示出來
beforeMount（載入前）在掛載開始以前被調用，相關的render函數首次被調用。實例已完成如下的配置：編譯模板，把data裏面的數據和模板生成html。注意此時尚未掛載html到頁面上。
mounted（載入後）在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用。實例已完成如下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程當中進行ajax交互。
beforeUpdate（更新前）在數據更新以前調用，發生在虛擬DOM從新渲染和打補丁以前。能夠在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後）在因爲數據更改致使的虛擬DOM從新渲染和打補丁以後調用。調用時，組件DOM已經更新，因此能夠執行依賴於DOM的操做。然而在大多數狀況下，應該避免在此期間更改狀態，由於這可能會致使更新無限循環。該鉤子在服務器端渲染期間不被調用。
beforeDestroy（銷燬前）在實例銷燬以前調用。實例仍然徹底可用。
destroyed（銷燬後）在實例銷燬以後調用。調用後，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
1.什麼是vue生命週期？
答： Vue 實例從建立到銷燬的過程，就是生命週期。從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。前端

2.vue生命週期的做用是什麼？
答：它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。vue

3.vue生命週期總共有幾個階段？
答：它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後。java

4.第一次頁面加載會觸發哪幾個鉤子？
答：會觸發下面這幾個beforeCreate, created, beforeMount, mounted 。node

5.DOM 渲染在哪一個週期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。面試

3、 Vue實現數據雙向綁定的原理：Object.defineProperty（）

vue實現數據雙向綁定主要是：採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。ajax

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer，Compile和Watcher三者，經過Observer來監聽本身的model的數據變化，經過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通訊橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變動雙向綁定效果。正則表達式

js實現簡單的雙向綁定

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

4、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。這樣能夠方便地跟蹤每個狀態的變化。

5、Vue的路由實現：hash模式、 history模式、abstract模式

hash模式：在瀏覽器中符號「#」，#以及#後面的字符稱之爲hash，用window.location.hash讀取；
特色：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動做，對服務端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號以前的內容會被包含在請求中，如 http://www.xxx.com，所以對於後端來講，即便沒有作到對路由的全覆蓋，也不會返回 404 錯誤。
hash 模式的實現原理
早期的前端路由的實現就是基於 location.hash 來實現的。其實現原理很簡單，location.hash 的值就是 URL 中 # 後面的內容。好比下面這個網站，它的 location.hash 的值爲 '#search'：

https://www.abc.com#search

hash 路由模式的實現主要是基於下面幾個特性：
URL 中 hash 值只是客戶端的一種狀態，也就是說當向服務器端發出請求時，hash 部分不會被髮送；
hash 值的改變，都會在瀏覽器的訪問歷史中增長一個記錄。所以咱們能經過瀏覽器的回退、前進按鈕控制hash 的切換；
能夠經過 a 標籤，並設置 href 屬性，當用戶點擊這個標籤後，URL 的 hash 值會發生改變；或者使用 JavaScript 來對 loaction.hash 進行賦值，改變 URL 的 hash 值；
咱們可使用 hashchange 事件來監聽 hash 值的變化，從而對頁面進行跳轉（渲染）。

history模式：history採用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）能夠對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變動。
history 模式下，前端的 URL 必須和實際向後端發起請求的 URL 一致，如 http://www.xxx.com/items/id。後端若是缺乏對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網裏如此描述：「不過這種模式要玩好，還須要後臺配置支持……因此呢，你要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。」
history 模式的實現原理
HTML5 提供了 History API 來實現 URL 的變化。其中作最主要的 API 有如下兩個：history.pushState() 和 history.repalceState()。這兩個 API 能夠在不進行刷新的狀況下，操做瀏覽器的歷史紀錄。惟一不一樣的是，前者是新增一個歷史記錄，後者是直接替換當前的歷史記錄，以下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history 路由模式的實現主要基於存在下面幾個特性：
pushState 和 repalceState 兩個 API 來操做實現 URL 的變化；
咱們可使用 popstate 事件來監聽 url 的變化，從而對頁面進行跳轉（渲染）；
history.pushState() 或 history.replaceState() 不會觸發 popstate 事件，這時咱們須要手動觸發頁面跳轉（渲染）。

abstract模式 : 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式.
(後續補上)

6、說說對v-model的瞭解？

咱們在 vue 項目中主要使用 v-model 指令在表單 input、textarea、select 等元素上建立雙向數據綁定，咱們知道 v-model 本質上不過是語法糖，v-model 在內部爲不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 做爲 prop 並將 change 做爲事件。
以 input 表單元素爲例：

<input v-model='something'>

至關於

<input v-bind:value="something" v-on:input="something = $event.target.value">

若是在自定義組件中，v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件，以下所示：
父組件：

<ModelChild v-model="message"></ModelChild>

子組件：

<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小紅')
  },
},

7、vue路由的鉤子函數

首頁能夠控制導航跳轉，beforeEach，afterEach等，通常用於頁面title的修改。一些須要登陸才能調整頁面的重定向功能。

beforeEach主要有3個參數to，from，next：

to：route即將進入的目標路由對象，

from：route當前導航正要離開的路由

next：function必定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。能夠控制網頁的跳轉。

8、vuex是什麼？怎麼使用？哪一種功能場景使用它？

只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。
在main.js引入store，注入。新建了一個目錄store，….. export 。
場景有：單頁應用中，組件之間的狀態、音樂播放、登陸狀態、加入購物車

state
Vuex 使用單一狀態樹,即每一個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化並不衝突。存放的數據狀態，不能夠直接修改裏面的數據。
mutations
mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。
getters
相似vue的計算屬性，主要用來過濾一些數據。
action
actions能夠理解爲經過將mutations裏面處裏數據的方法變成可異步的處理數據的方法，簡單的說就是異步操做數據。view 層經過 store.dispath 來分發 action。

const store = new Vuex.Store({ //store實例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules
項目特別複雜的時候，可讓每個模塊擁有本身的state、mutation、action、getters,使得結構很是清晰，方便管理。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

9、vue-cli如何新增自定義指令？

1.建立局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 建立指令(能夠多個)
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個參數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操做
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

10、vue如何自定義一個過濾器？

html代碼：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代碼：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定義過濾器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器接收表達式的值 (msg) 做爲第一個參數。capitalize 過濾器將會收到 msg的值做爲第一個參數。

11、對keep-alive 的瞭解？

keep-alive是 Vue 內置的一個組件，可使被包含的組件保留狀態，或避免從新渲染。
在vue 2.1.0 版本以後，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大於include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 該組件是否緩存取決於include和exclude屬性 -->
  </component>
</keep-alive>

參數解釋
include - 字符串或正則表達式，只有名稱匹配的組件會被緩存
exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性容許組件有條件地緩存。兩者均可以用「，」分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。

使用示例

<!-- 逗號分隔字符串，只有組件a與b被緩存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正則表達式 (須要使用 v-bind，符合匹配規則的都會被緩存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (須要使用 v-bind，被包含的都會被緩存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

12、對 SPA 單頁面的理解，它的優缺點分別是什麼？

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會由於用戶的操做而進行頁面的從新加載或跳轉；取而代之的是利用路由機制實現 HTML 內容的變換，UI 與用戶的交互，避免頁面的從新加載。
優勢：
用戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染；
基於上面一點，SPA 相對對服務器壓力小；
先後端職責分離，架構清晰，前端進行交互邏輯，後端負責數據處理；
缺點：
初次加載耗時多：爲實現單頁 Web 應用功能及顯示效果，須要在加載頁面的時候將 JavaScript、CSS 統一加載，部分頁面按需加載；
前進後退路由管理：因爲單頁應用在一個頁面中顯示全部的內容，因此不能使用瀏覽器的前進後退功能，全部的頁面切換須要本身創建堆棧管理；
SEO 難度較大：因爲全部的內容都在一個頁面中動態替換顯示，因此在 SEO 上其有着自然的弱勢。

十3、Class 與 Style 如何動態綁定？

Class 能夠經過對象語法和數組語法進行動態綁定：

對象語法：

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

數組語法：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Style 也能夠經過對象語法和數組語法進行動態綁定：

對象語法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

數組語法：

<div v-bind:style="[styleColor, styleSize]"></div>

data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

十4、理解 Vue 的單向數據流？

全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，可是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而致使你的應用的數據流向難以理解。
額外的，每次父級組件發生更新時，子組件中全部的 prop 都將會刷新爲最新的值。這意味着你不該該在一個子組件內部改變 prop。若是你這樣作了，Vue 會在瀏覽器的控制檯中發出警告。子組件想修改時，只能經過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。
有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子組件接下來但願將其做爲一個本地的 prop 數據來使用。在這種狀況下，最好定義一個本地的 data 屬性並將這個 prop 用做其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

這個 prop 以一種原始的值傳入且須要進行轉換。在這種狀況下，最好使用這個 prop 的值來定義一個計算屬性

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

十5、computed 和 watch 的區別和運用的場景？

computed： 是計算屬性，依賴其它屬性值，而且 computed 的值有緩存，只有它依賴的屬性值發生改變，下一次獲取 computed 的值時纔會從新計算 computed 的值；
watch： 更多的是「觀察」的做用，相似於某些數據的監聽回調，每當監聽的數據變化時都會執行回調進行後續操做；
運用場景：
當咱們須要進行數值計算，而且依賴於其它數據時，應該使用 computed，由於能夠利用 computed 的緩存特性，避免每次獲取值時，都要從新計算；
當咱們須要在數據變化時執行異步或開銷較大的操做時，應該使用 watch，使用 watch 選項容許咱們執行異步操做 ( 訪問一個 API )，限制咱們執行該操做的頻率，並在咱們獲得最終結果前，設置中間狀態。這些都是計算屬性沒法作到的。

十6、直接給一個數組項賦值，Vue 能檢測到變化嗎？

因爲 JavaScript 的限制，Vue 不能檢測到如下數組的變更：
當你利用索引直接設置一個數組項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

爲了解決第一個問題，Vue 提供瞭如下操做方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一個別名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

爲了解決第二個問題，Vue 提供瞭如下操做方法：

// Array.prototype.splice
vm.items.splice(newLength)

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

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

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

十8、父組件能夠監聽到子組件的生命週期嗎？

好比有父組件 Parent 和子組件 Child，若是父組件監聽到子組件掛載 mounted 就作一些邏輯處理，能夠經過如下寫法實現：

// Parent.vue
<Child @mounted="doSomething"/>
    
// Child.vue
mounted() {
  this.$emit("mounted");
}

以上須要手動經過 $emit 觸發父組件的事件，更簡單的方式能夠在父組件引用子組件時經過 @hook 來監聽便可，以下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父組件監聽到 mounted 鉤子函數 ...');
},

//  Child.vue
mounted(){
   console.log('子組件觸發 mounted 鉤子函數 ...');
},        
// 以上輸出順序爲：
// 子組件觸發 mounted 鉤子函數 ...
// 父組件監聽到 mounted 鉤子函數 ...

固然 @hook 方法不只僅是能夠監聽 mounted，其它的生命週期事件，例如：created，updated 等均可以監聽

十9、組件中 data 爲何是一個函數？

由於組件是用來複用的，且 JS 裏對象是引用關係，若是組件中 data 是一個對象，那麼這樣做用域沒有隔離，子組件中的 data 屬性值會相互影響，若是組件中 data 選項是一個函數，那麼每一個實例能夠維護一份被返回對象的獨立的拷貝，組件實例之間的 data 屬性值不會互相影響；而 new Vue 的實例，是不會被複用的，所以不存在引用對象的問題。
。

二10、Vue 怎麼用 vm.$set() 解決對象新增屬性不能響應的問題？

受現代 JavaScript 的限制，Vue 沒法檢測到對象屬性的添加或刪除。因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化，因此屬性必須在 data 對象上存在才能讓 Vue 將它轉換爲響應式的。可是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來實現爲對象添加響應式屬性，那框架自己是如何實現的呢？

Vue 源碼
export function set (target: Array<any> | Object, key: any, val: any): any {
  // target 爲數組  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改數組的長度, 避免索引>數組長度致使splcie()執行有誤
    target.length = Math.max(target.length, key)
    // 利用數組的splice變異方法觸發響應式  
    target.splice(key, 1, val)
    return val
  }
  // key 已經存在，直接修改屬性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 自己就不是響應式數據, 直接賦值
  if (!ob) {
    target[key] = val
    return val
  }
  // 對屬性進行響應式處理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

閱讀以上源碼可知，vm.$set 的實現原理是：
若是目標是數組，直接使用數組的 splice 方法觸發相應式；
若是目標是對象，會先判讀屬性是否存在、對象是不是響應式，最終若是要對屬性進行響應式處理，則是經過調用 defineReactive 方法進行響應式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性採用 Object.defineProperty 動態添加 getter 和 setter 的功能所調用的方法）

二11、Vue 中的 key 有什麼做用？

key 是爲 Vue 中 vnode 的惟一標記，經過這個 key，咱們的 diff 操做能夠更準確、更快速。
Vue 的 diff 過程能夠歸納爲：oldCh 和 newCh 各有兩個頭尾的變量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它們會新節點和舊節點會進行兩兩對比，即一共有4種比較方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，若是以上 4 種比較都沒匹配，若是設置了key，就會用 key 再進行比較，在比較的過程當中，遍歷會往中間靠，一旦 StartIdx > EndIdx 代表 oldCh 和 newCh 至少有一個已經遍歷完了，就會結束比較。
因此 Vue 中 key 的做用是：key 是爲 Vue 中 vnode 的惟一標記，經過這個 key，咱們的 diff 操做能夠更準確、更快速。

更準確：由於帶 key 就不是就地複用了，在 sameNode 函數 a.key === b.key 對比中能夠避免就地複用的狀況。因此會更加準確。
更快速：利用 key 的惟一性生成 map 對象來獲取對應節點，比遍歷方式更快，源碼以下：

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

二12、說說對於 SSR瞭解？有沒有使用過？

Vue.js 是構建客戶端應用程序的框架。默認狀況下，能夠在瀏覽器中輸出 Vue 組件，進行生成 DOM 和操做 DOM。然而，也能夠將同一個組件渲染爲服務端的 HTML 字符串，將它們直接發送到瀏覽器，最後將這些靜態標記"激活"爲客戶端上徹底可交互的應用程序。
即：SSR大體的意思就是vue在客戶端將標籤渲染成的整個 html 片斷的工做在服務端完成，服務端造成的html 片斷直接返回給客戶端這個過程就叫作服務端渲染。
優勢：
更好的 SEO：由於 SPA 頁面的內容是經過 Ajax 獲取，而搜索引擎爬取工具並不會等待 Ajax 異步完成後再抓取頁面內容，因此在 SPA 中是抓取不到頁面經過 Ajax 獲取到的內容；而 SSR 是直接由服務端返回已經渲染好的頁面（數據已經包含在頁面中），因此搜索引擎爬取工具能夠抓取渲染好的頁面；
更快的內容到達時間（首屏加載更快）： SPA 會等待全部 Vue 編譯後的 js 文件都下載完成後，纔開始進行頁面的渲染，文件下載等須要必定的時間等，因此首屏渲染須要必定的時間；SSR 直接由服務端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，因此 SSR 有更快的內容到達時間；
缺點：
更多的開發條件限制：例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數，這會致使一些外部擴展庫須要特殊處理，才能在服務端渲染應用程序中運行；而且與能夠部署在任何靜態文件服務器上的徹底靜態單頁面應用程序 SPA 不一樣，服務端渲染應用程序，須要處於 Node.js server 運行環境；
更多的服務器負載：在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量佔用CPU 資源。

二十3、服務端渲染 SSR or 預渲染

服務端渲染是指 Vue 在客戶端將標籤渲染成的整個 html 片斷的工做在服務端完成，服務端造成的 html 片斷直接返回給客戶端這個過程就叫作服務端渲染。
1.服務端渲染的優勢：
更好的 SEO：由於 SPA 頁面的內容是經過 Ajax 獲取，而搜索引擎爬取工具並不會等待 Ajax 異步完成後再抓取頁面內容，因此在 SPA 中是抓取不到頁面經過 Ajax 獲取到的內容；而 SSR 是直接由服務端返回已經渲染好的頁面（數據已經包含在頁面中），因此搜索引擎爬取工具能夠抓取渲染好的頁面；
更快的內容到達時間（首屏加載更快）： SPA 會等待全部 Vue 編譯後的 js 文件都下載完成後，纔開始進行頁面的渲染，文件下載等須要必定的時間等，因此首屏渲染須要必定的時間；SSR 直接由服務端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，因此 SSR 有更快的內容到達時間；
2.服務端渲染的缺點：
更多的開發條件限制：例如服務端渲染只支持 beforCreate 和 created 兩個鉤子函數，這會致使一些外部擴展庫須要特殊處理，才能在服務端渲染應用程序中運行；而且與能夠部署在任何靜態文件服務器上的徹底靜態單頁面應用程序 SPA 不一樣，服務端渲染應用程序，須要處於 Node.js server 運行環境；
更多的服務器負載：在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量佔用CPU 資源，所以若是你預料在高流量環境下使用，請準備相應的服務器負載，並明智地採用緩存策略。
若是你的項目的 SEO 和首屏渲染是評價項目的關鍵指標，那麼你的項目就須要服務端渲染來幫助你實現最佳的初始加載性能和 SEO。若是你的 Vue 項目只需改善少數營銷頁面（例如 /products， /about， /contact 等）的 SEO，那麼你可能須要預渲染，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優勢是設置預渲染更簡單，並能夠將你的前端做爲一個徹底靜態的站點，具體你可使用 prerender-spa-plugin 就能夠輕鬆地添加預渲染。

二十4、虛擬 DOM 的優缺點？

優勢：
保證性能下限：框架的虛擬 DOM 須要適配任何上層 API 可能產生的操做，它的一些 DOM 操做的實現必須是普適的，因此它的性能並非最優的；可是比起粗暴的 DOM 操做性能要好不少，所以框架的虛擬 DOM 至少能夠保證在你不須要手動優化的狀況下，依然能夠提供還不錯的性能，即保證性能的下限；
無需手動操做 DOM：咱們再也不須要手動去操做 DOM，只須要寫好 View-Model 的代碼邏輯，框架會根據虛擬 DOM 和數據雙向綁定，幫咱們以可預期的方式更新視圖，極大提升咱們的開發效率；
跨平臺：虛擬 DOM 本質上是 JavaScript 對象,而 DOM 與平臺強相關，相比之下虛擬 DOM 能夠進行更方便地跨平臺操做，例如服務器渲染、weex 開發等等。
缺點:
沒法進行極致優化：雖然虛擬 DOM + 合理的優化，足以應對絕大部分應用的性能需求，但在一些性能要求極高的應用中虛擬 DOM 沒法進行鍼對性的極致優化。

二十5、虛擬 DOM 實現原理？

虛擬 DOM 的實現原理主要包括如下 3 部分：
①用 JavaScript 對象模擬真實 DOM 樹，對真實 DOM 進行抽象；
②diff 算法 — 比較兩棵虛擬 DOM 樹的差別；
③pach 算法 — 將兩個虛擬 DOM 對象的差別應用到真正的 DOM 樹。

二十6、Vue 項目優化

1.代碼層面的優化
v-if 和 v-show 區分使用場景
computed 和 watch 區分使用場景
v-for 遍歷必須爲 item 添加 key，且避免同時使用 v-if
長列表性能優化
事件的銷燬
圖片資源懶加載
路由懶加載
第三方插件的按需引入
優化無限列表性能
服務端渲染 SSR or 預渲染

2.Webpack 層面的優化
Webpack 對圖片進行壓縮
減小 ES6 轉爲 ES5 的冗餘代碼
提取公共代碼
模板預編譯
提取組件的 CSS
優化 SourceMap
構建結果輸出分析
Vue 項目的編譯優化

3.基礎的 Web 技術的優化
開啓 gzip 壓縮
瀏覽器緩存
CDN 的使用
使用 Chrome Performance 查找性能瓶頸

二十7、vue3.0 特性的瞭解

1.監測機制的改變
Vue3.0 將帶來基於代理 Proxy 的 observer 實現，提供全語言覆蓋的反應性跟蹤。這消除了 Vue 2 當中基於 Object.defineProperty 的實現所存在的不少限制：①只能監測屬性，不能監測對象；②檢測屬性的添加和刪除；③檢測數組索引和長度的變動；④支持 Map、Set、WeakMap 和 WeakSet。
新的 observer 還提供瞭如下特性：
用於建立 observable 的公開 API。這爲中小規模場景提供了簡單輕量級的跨組件狀態管理解決方案。
默認採用惰性觀察。在 2.x 中，無論反應式數據有多大，都會在啓動時被觀察到。若是你的數據集很大，這可能會在應用啓動時帶來明顯的開銷。在 3.x 中，只觀察用於渲染應用程序最初可見部分的數據。
更精確的變動通知。在 2.x 中，經過 Vue.set 強制添加新屬性將致使依賴於該對象的 watcher 收到變動通知。在 3.x 中，只有依賴於特定屬性的 watcher 纔會收到通知。
不可變的 observable：咱們能夠建立值的「不可變」版本（即便是嵌套屬性），除非系統在內部暫時將其「解禁」。這個機制可用於凍結 prop 傳遞或 Vuex 狀態樹之外的變化。
更好的調試功能：咱們可使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在何時以及爲何從新渲染。

2.模板
模板方面沒有大的變動，只改了做用域插槽，2.x 的機制致使做用域插槽變了，父組件會從新渲染，而 3.0 把做用域插槽改爲了函數的方式，這樣只會影響子組件的從新渲染，提高了渲染的性能。
同時，對於 render 函數的方面，vue3.0 也會進行一系列更改來方便習慣直接使用 api 來生成 vdom 。
3.對象式的組件聲明方式
vue2.x 中的組件是經過聲明的方式傳入一系列 option，和 TypeScript 的結合須要經過一些裝飾器的方式來作，雖然能實現功能，可是比較麻煩。3.0 修改了組件的聲明方式，改爲了類式的寫法，這樣使得和 TypeScript 的結合變得很容易。
此外，vue 的源碼也改用了 TypeScript 來寫。其實當代碼的功能複雜以後，必須有一個靜態類型系統來作一些輔助管理。如今 vue3.0 也全面改用 TypeScript 來重寫了，更是使得對外暴露的 api 更容易結合 TypeScript。靜態類型系統對於複雜代碼的維護確實頗有必要。
4.其它方面的更改
vue3.0 的改變是全面的，上面只涉及到主要的 3 個方面，還有一些其它的更改：
支持自定義渲染器，從而使得 weex 能夠經過自定義渲染器的方式來擴展，而不是直接 fork 源碼來改的方式。
支持 Fragment（多個根節點）和 Protal（在 dom 其它部分渲染組建內容）組件，針對一些特殊的場景作了處理。
基於 treeshaking 優化，提供了更多的內置功能。

二十8、Vue路由跳轉方式有哪幾種？

1.router-link

**不帶參數** 
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> //name,path都行, 建議用name  
// 注意：router-link中連接若是是'/'開始就是從根路由開始，若是開始不帶'/'，則從當前路由開始。 
帶參數
<router-link :to="{name:'home', params: {id:1}}">       
// params傳參數 (相似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留     
// html 取參  $route.params.id
// script 取參  this.$route.params.id 
<router-link :to="{name:'home', query: {id:1}}"> 
// query傳參數 (相似get,url後面會顯示參數)
// 路由可不配置
// html 取參  $route.query.id
// script 取參  this.$route.query.id

2.this.$router.push() (函數裏面調用)

不帶參數 
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
query傳參 
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}}) 
// html 取參  $route.query.id
// script 取參  this.$route.query.id

2.1 params傳參

this.$router.push({name:'home',params: {id:'1'}})  // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留
// html 取參  $route.params.id
// script 取參  this.$route.params.id

2.2 query和params區別

query相似 get, 跳轉以後頁面 url後面會拼接參數,相似?id=1, 非重要性的能夠這樣傳, 密碼之類仍是用params刷新頁面id還在 
params相似 post, 跳轉以後頁面 url後面不會拼接參數 , 可是刷新頁面id 會消失

3.this.$router.replace() (用法同上,push)

4. this.$router.go(n) ()

二十9、其它Vue面試題

1.css只在當前組件起做用
答：在style標籤中寫入scoped便可例如：<style scoped></style>

2.v-if 和 v-show 區別
答：v-if按照條件是否渲染，v-show是display的block或none；

3.$route和$router的區別
答：$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。

4.vue.js的兩個核心是什麼？
答：數據驅動、組件系統

5.vue幾種經常使用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue經常使用的修飾符？
答：.prevent: 提交事件再也不重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素自己而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用

7.v-on 能夠綁定多個方法嗎？
答：能夠

8.vue中 key 值的做用？
答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用「就地複用」策略。若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。key的做用主要是爲了高效的更新虛擬DOM。

9.什麼是vue的計算屬性？
答：在模板中放入太多的邏輯會讓模板太重且難以維護，在須要對數據進行復雜處理，且可能屢次使用的狀況下，儘可能採起計算屬性的方式。好處：①使得數據處理結構清晰；②依賴於數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名便可；⑤經常使用的是getter方法，獲取數據，也可使用set方法改變數據；⑥相較於methods，無論依賴的數據變不變，methods都會從新計算，可是依賴數據不變的時候computed從緩存中獲取，不會從新計算。

10.vue等單頁面應用及其優缺點
答：優勢：Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利於SEO的優化（若是要支持SEO，建議經過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可使用瀏覽器的導航按鈕須要自行實現前進、後退。

11.怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值
答：在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id，使用 router 對象的 params.id 獲取。