摘要：在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題知識點(diǎn)，對一些知識點(diǎn)進(jìn)行更加深入的描述。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。改變中的狀態(tài)的唯一途徑就是顯式地提交。這兩個可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。

在第一版的基礎(chǔ)上進(jìn)行了優(yōu)化，新增一些面試題/知識點(diǎn)，對一些知識點(diǎn)進(jìn)行更加深入的描述。

MVVM 是 Model-View-ViewModel 的縮寫。
Model代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。
View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來。
ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡單理解就是一個同步View 和 Model的對象，連接Model和View。
在MVVM架構(gòu)下，View 和 Model 之間并沒有直接的聯(lián)系，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的， 因此View 數(shù)據(jù)的變化會同步到Model中，而Model 數(shù)據(jù)的變化也會立即反應(yīng)到View 上。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理。

MVVM的優(yōu)缺點(diǎn)?
優(yōu)點(diǎn):
分離視圖（View）和模型（Model）,降低代碼耦合，提高視圖或者邏輯的重用性: 比如視圖（View）可以獨(dú)立于Model變化和修改，一個ViewModel可以綁定不同的"View"上，當(dāng)View變化的時候Model不可以不變，當(dāng)Model變化的時候View也可以不變。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯
提高可測試性: ViewModel的存在可以幫助開發(fā)者更好地編寫測試代碼
自動更新dom: 利用雙向綁定,數(shù)據(jù)更新后視圖自動更新,讓開發(fā)者從繁瑣的手動dom中解放
缺點(diǎn):
Bug很難被調(diào)試: 因?yàn)槭褂秒p向綁定的模式，當(dāng)你看到界面異常了，有可能是你View的代碼有Bug，也可能是Model的代碼有問題。數(shù)據(jù)綁定使得一個位置的Bug被快速傳遞到別的位置，要定位原始出問題的地方就變得不那么容易了。另外，數(shù)據(jù)綁定的聲明是指令式地寫在View的模版當(dāng)中的，這些內(nèi)容是沒辦法去打斷點(diǎn)debug的
一個大的模塊中model也會很大，雖然使用方便了也很容易保證了數(shù)據(jù)的一致性，當(dāng)時長期持有，不釋放內(nèi)存就造成了花費(fèi)更多的內(nèi)存
對于大型的圖形應(yīng)用程序，視圖狀態(tài)較多，ViewModel的構(gòu)建和維護(hù)的成本都會比較高。

beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測和初始化事件還未開始
created（創(chuàng)建后） 完成數(shù)據(jù)觀測，屬性和方法的運(yùn)算，初始化事件，$el屬性還沒有顯示出來
beforeMount（載入前） 在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。實(shí)例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進(jìn)行ajax交互。
beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。
updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy（銷毀前） 在實(shí)例銷毀之前調(diào)用。實(shí)例仍然完全可用。
destroyed（銷毀后） 在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
1.什么是vue生命周期？
答： Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。

2.vue生命周期的作用是什么？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實(shí)例的過程時更容易形成好的邏輯。

3.vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。

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

5.DOM 渲染在 哪個周期中就已經(jīng)完成？
答：DOM 渲染在 mounted 中就已經(jīng)完成了。

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。當(dāng)把一個普通 Javascript 對象傳給 Vue 實(shí)例來作為它的 data 選項(xiàng)時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監(jiān)聽自己的model的數(shù)據(jù)變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 —>視圖更新；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果。

js實(shí)現(xiàn)簡單的雙向綁定

Vue 組件間通信只要指以下 3 類通信：父子組件通信、隔代組件通信、兄弟組件通信
（1）props / $emit 適用 父子組件通信
這種方法是 Vue 組件的基礎(chǔ)，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展開介紹。
（2）ref 與 $parent / $children 適用 父子組件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例
$parent / $children：訪問父 / 子實(shí)例
（3）EventBus （$emit / $on） 適用于 父子、隔代、兄弟組件通信
這種方法通過一個空的 Vue 實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實(shí)現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件。
（4）$attrs/$listeners 適用于 隔代組件通信
$attrs：包含了父作用域中不被 prop 所識別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 ( class 和 style 除外 )，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件。通常配合 inheritAttrs 選項(xiàng)一起使用。
$listeners：包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件

（5）provide / inject 適用于 隔代組件通信
祖先組件中通過 provider 來提供變量，然后在子孫組件中通過 inject 來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態(tài)，跨級組件間建立了一種主動提供與依賴注入的關(guān)系。
（6）Vuex 適用于 父子、隔代、兄弟組件通信
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）。“store” 基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。
Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣可以方便地跟蹤每一個狀態(tài)的變化。

hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；
特點(diǎn)：hash雖然在URL中，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用，hash不會重加載頁面。
hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。
hash 模式的實(shí)現(xiàn)原理
早期的前端路由的實(shí)現(xiàn)就是基于 location.hash 來實(shí)現(xiàn)的。其實(shí)現(xiàn)原理很簡單，location.hash 的值就是 URL 中 # 后面的內(nèi)容。比如下面這個網(wǎng)站，它的 location.hash 的值為 "#search"：

https://www.abc.com#search

hash 路由模式的實(shí)現(xiàn)主要是基于下面幾個特性：
URL 中 hash 值只是客戶端的一種狀態(tài)，也就是說當(dāng)向服務(wù)器端發(fā)出請求時，hash 部分不會被發(fā)送；
hash 值的改變，都會在瀏覽器的訪問歷史中增加一個記錄。因此我們能通過瀏覽器的回退、前進(jìn)按鈕控制hash 的切換；
可以通過?a?標(biāo)簽，并設(shè)置?href?屬性，當(dāng)用戶點(diǎn)擊這個標(biāo)簽后，URL?的 hash 值會發(fā)生改變；或者使用 ?JavaScript 來對?loaction.hash?進(jìn)行賦值，改變 URL 的 hash 值；
我們可以使用 hashchange 事件來監(jiān)聽 hash 值的變化，從而對頁面進(jìn)行跳轉(zhuǎn)（渲染）。

history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。
history 模式下，前端的 URL 必須和實(shí)際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”
history 模式的實(shí)現(xiàn)原理
HTML5 提供了 History API 來實(shí)現(xiàn) URL 的變化。其中做最主要的 API 有以下兩個：history.pushState() 和 history.repalceState()。這兩個 API 可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。唯一不同的是，前者是新增一個歷史記錄，后者是直接替換當(dāng)前的歷史記錄，如下所示：
window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);
history 路由模式的實(shí)現(xiàn)主要基于存在下面幾個特性：
pushState 和 repalceState 兩個 API 來操作實(shí)現(xiàn) URL 的變化 ；
我們可以使用 popstate 事件來監(jiān)聽 url 的變化，從而對頁面進(jìn)行跳轉(zhuǎn)（渲染）；
history.pushState() 或 history.replaceState() 不會觸發(fā) popstate 事件，這時我們需要手動觸發(fā)頁面跳轉(zhuǎn)（渲染）。

abstract模式 : 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會自動強(qiáng)制進(jìn)入這個模式.
(后續(xù)補(bǔ)上)

我們在 vue 項(xiàng)目中主要使用 v-model 指令在表單 input、textarea、select 等元素上創(chuàng)建雙向數(shù)據(jù)綁定，我們知道 v-model 本質(zhì)上不過是語法糖，v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：
text 和 textarea 元素使用 value 屬性和 input 事件；
checkbox 和 radio 使用 checked 屬性和 change 事件；
select 字段將 value 作為 prop 并將 change 作為事件。
以 input 表單元素為例：

相當(dāng)于

如果在自定義組件中，v-model 默認(rèn)會利用名為?value 的 prop 和名為?input?的事件，如下所示：
父組件：

子組件：

{{value}}

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

首頁可以控制導(dǎo)航跳轉(zhuǎn)，beforeEach，afterEach等，一般用于頁面title的修改。一些需要登錄才能調(diào)整頁面的重定向功能。

beforeEach主要有3個參數(shù)to，from，next：

to：route即將進(jìn)入的目標(biāo)路由對象，

from：route當(dāng)前導(dǎo)航正要離開的路由

next：function一定要調(diào)用該方法resolve這個鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)。可以控制網(wǎng)頁的跳轉(zhuǎn)。

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

state
Vuex 使用單一狀態(tài)樹,即每個應(yīng)用將僅僅包含一個store 實(shí)例，但單一狀態(tài)樹和模塊化并不沖突。存放的數(shù)據(jù)狀態(tài)，不可以直接修改里面的數(shù)據(jù)。
mutations
mutations定義的方法動態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)。
getters
類似vue的計(jì)算屬性，主要用來過濾一些數(shù)據(jù)。
action
actions可以理解為通過將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法，簡單的說就是異步操作數(shù)據(jù)。view 層通過 store.dispath 來分發(fā) action。

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

modules
項(xiàng)目特別復(fù)雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。

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

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

1.創(chuàng)建局部指令

var app = new Vue({
    el: "#app",
    data: {    
    },
    // 創(chuàng)建指令(可以多個)
    directives: {
        // 指令名稱
        dir1: {
            inserted(el) {
                // 指令中第一個參數(shù)是當(dāng)前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進(jìn)行操作
                el.style.width = "200px";
                el.style.height = "200px";
                el.style.background = "#000";
            }
        }
    }
})

2.全局指令

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

3.指令的使用

html代碼：

     
     {{msg| capitalize }}

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)
})

過濾器接收表達(dá)式的值 (msg) 作為第一個參數(shù)。capitalize 過濾器將會收到 msg的值作為第一個參數(shù)。

keep-alive是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優(yōu)先級大于include) 。

使用方法

參數(shù)解釋
include - 字符串或正則表達(dá)式，只有名稱匹配的組件會被緩存
exclude - 字符串或正則表達(dá)式，任何名稱匹配的組件都不會被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達(dá)式、數(shù)組。當(dāng)使用正則或者是數(shù)組時，要記得使用v-bind 。

使用示例

SPA（ single-page application ）僅在 Web 頁面初始化時加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。
優(yōu)點(diǎn)：
用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；
基于上面一點(diǎn)，SPA 相對對服務(wù)器壓力小；
前后端職責(zé)分離，架構(gòu)清晰，前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理；
缺點(diǎn)：
初次加載耗時多：為實(shí)現(xiàn)單頁 Web 應(yīng)用功能及顯示效果，需要在加載頁面的時候?qū)?JavaScript、CSS 統(tǒng)一加載，部分頁面按需加載；
前進(jìn)后退路由管理：由于單頁應(yīng)用在一個頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁面切換需要自己建立堆棧管理；
SEO 難度較大：由于所有的內(nèi)容都在一個頁面中動態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢。

Class 可以通過對象語法和數(shù)組語法進(jìn)行動態(tài)綁定：

對象語法：

data: {
  isActive: true,
  hasError: false
}

數(shù)組語法：

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

Style 也可以通過對象語法和數(shù)組語法進(jìn)行動態(tài)綁定：

對象語法：

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

數(shù)組語法：

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

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
額外的，每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告。子組件想修改時，只能通過 $emit 派發(fā)一個自定義事件，父組件接收到后，由父組件修改。
有兩種常見的試圖改變一個 prop 的情形 :

這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。 在這種情況下，最好定義一個本地的 data 屬性并將這個 prop 用作其初始值：

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

這個 prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。 在這種情況下，最好使用這個 prop 的值來定義一個計(jì)算屬性

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

computed： 是計(jì)算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計(jì)算 computed 的值；
watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進(jìn)行后續(xù)操作；
運(yùn)用場景：
當(dāng)我們需要進(jìn)行數(shù)值計(jì)算，并且依賴于其它數(shù)據(jù)時，應(yīng)該使用 computed，因?yàn)榭梢岳?computed 的緩存特性，避免每次獲取值時，都要重新計(jì)算；
當(dāng)我們需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，應(yīng)該使用 watch，使用?watch?選項(xiàng)允許我們執(zhí)行異步操作 ( 訪問一個 API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無法做到的。

由于 JavaScript 的限制，Vue 不能檢測到以下數(shù)組的變動：
當(dāng)你利用索引直接設(shè)置一個數(shù)組項(xiàng)時，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時，例如：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)

可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行調(diào)用，因?yàn)樵谶@三個鉤子函數(shù)中，data 已經(jīng)創(chuàng)建，可以將服務(wù)端端返回的數(shù)據(jù)進(jìn)行賦值。但是本人推薦在 created 鉤子函數(shù)中調(diào)用異步請求，因?yàn)樵?created 鉤子函數(shù)中調(diào)用異步請求有以下優(yōu)點(diǎn)：

能更快獲取到服務(wù)端數(shù)據(jù)，減少頁面?loading 時間；
ssr?不支持 beforeMount 、mounted 鉤子函數(shù)，所以放在 created 中有助于一致性；

比如有父組件 Parent 和子組件 Child，如果父組件監(jiān)聽到子組件掛載 mounted 就做一些邏輯處理，可以通過以下寫法實(shí)現(xiàn)：

// Parent.vue

    
// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手動通過 $emit 觸發(fā)父組件的事件，更簡單的方式可以在父組件引用子組件時通過 @hook 來監(jiān)聽即可，如下所示：

//  Parent.vue


doSomething() {
   console.log("父組件監(jiān)聽到 mounted 鉤子函數(shù) ...");
},

//  Child.vue
mounted(){
   console.log("子組件觸發(fā) mounted 鉤子函數(shù) ...");
},        
// 以上輸出順序?yàn)椋?// 子組件觸發(fā) mounted 鉤子函數(shù) ...
// 父組件監(jiān)聽到 mounted 鉤子函數(shù) ...     

當(dāng)然 @hook 方法不僅僅是可以監(jiān)聽 mounted，其它的生命周期事件，例如：created，updated 等都可以監(jiān)聽

因?yàn)榻M件是用來復(fù)用的，且 JS 里對象是引用關(guān)系，如果組件中 data 是一個對象，那么這樣作用域沒有隔離，子組件中的 data 屬性值會相互影響，如果組件中 data 選項(xiàng)是一個函數(shù)，那么每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝，組件實(shí)例之間的 data 屬性值不會互相影響；而 new Vue 的實(shí)例，是不會被復(fù)用的，因此不存在引用對象的問題。
。

受現(xiàn)代 JavaScript 的限制 ，Vue?無法檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實(shí)例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data?對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 來實(shí)現(xiàn)為對象添加響應(yīng)式屬性，那框架本身是如何實(shí)現(xiàn)的呢？

Vue 源碼
export function set (target: Array | Object, key: any, val: any): any {
  // target 為數(shù)組  
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改數(shù)組的長度, 避免索引>數(shù)組長度導(dǎo)致splcie()執(zhí)行有誤
    target.length = Math.max(target.length, key)
    // 利用數(shù)組的splice變異方法觸發(fā)響應(yīng)式  
    target.splice(key, 1, val)
    return val
  }
  // key 已經(jīng)存在，直接修改屬性值  
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  // target 本身就不是響應(yīng)式數(shù)據(jù), 直接賦值
  if (!ob) {
    target[key] = val
    return val
  }
  // 對屬性進(jìn)行響應(yīng)式處理
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

閱讀以上源碼可知，vm.$set 的實(shí)現(xiàn)原理是：
如果目標(biāo)是數(shù)組，直接使用數(shù)組的 splice 方法觸發(fā)相應(yīng)式；
如果目標(biāo)是對象，會先判讀屬性是否存在、對象是否是響應(yīng)式，最終如果要對屬性進(jìn)行響應(yīng)式處理，則是通過調(diào)用 defineReactive 方法進(jìn)行響應(yīng)式處理（ defineReactive 方法就是 Vue 在初始化對象時，給對象屬性采用 Object.defineProperty 動態(tài)添加 getter 和 setter 的功能所調(diào)用的方法）

key 是為 Vue 中 vnode 的唯一標(biāo)記，通過這個 key，我們的 diff 操作可以更準(zhǔn)確、更快速。
Vue 的 diff 過程可以概括為：oldCh 和 newCh 各有兩個頭尾的變量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，它們會新節(jié)點(diǎn)和舊節(jié)點(diǎn)會進(jìn)行兩兩對比，即一共有4種比較方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newStartIndex 和 oldEndIndex 、newEndIndex 和 oldStartIndex，如果以上 4 種比較都沒匹配，如果設(shè)置了key，就會用 key 再進(jìn)行比較，在比較的過程中，遍歷會往中間靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一個已經(jīng)遍歷完了，就會結(jié)束比較。
所以 Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標(biāo)記，通過這個 key，我們的 diff 操作可以更準(zhǔn)確、更快速。

更準(zhǔn)確：因?yàn)閹?key 就不是就地復(fù)用了，在 sameNode 函數(shù)?a.key === b.key 對比中可以避免就地復(fù)用的情況。所以會更加準(zhǔn)確。
更快速：利用 key 的唯一性生成 map 對象來獲取對應(yīng)節(jié)點(diǎn)，比遍歷方式更快，源碼如下：

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
}

Vue.js 是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出 Vue 組件，進(jìn)行生成 DOM 和操作 DOM。然而，也可以將同一個組件渲染為服務(wù)端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)記"激活"為客戶端上完全可交互的應(yīng)用程序。
即：SSR大致的意思就是vue在客戶端將標(biāo)簽渲染成的整個 html 片段的工作在服務(wù)端完成，服務(wù)端形成的html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。
優(yōu)點(diǎn)：
更好的 SEO： 因?yàn)?SPA 頁面的內(nèi)容是通過 Ajax 獲取，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；
更快的內(nèi)容到達(dá)時間（首屏加載更快）： SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進(jìn)行頁面的渲染，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內(nèi)容到達(dá)時間；
缺點(diǎn)：
更多的開發(fā)條件限制： 例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導(dǎo)致一些外部擴(kuò)展庫需要特殊處理，才能在服務(wù)端渲染應(yīng)用程序中運(yùn)行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境；
更多的服務(wù)器負(fù)載：在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源。

服務(wù)端渲染是指 Vue 在客戶端將標(biāo)簽渲染成的整個 html 片段的工作在服務(wù)端完成，服務(wù)端形成的 html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。
1.服務(wù)端渲染的優(yōu)點(diǎn)：
更好的 SEO： 因?yàn)?SPA 頁面的內(nèi)容是通過 Ajax 獲取，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；
更快的內(nèi)容到達(dá)時間（首屏加載更快）： SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進(jìn)行頁面的渲染，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內(nèi)容到達(dá)時間；
2.服務(wù)端渲染的缺點(diǎn)：
更多的開發(fā)條件限制： 例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導(dǎo)致一些外部擴(kuò)展庫需要特殊處理，才能在服務(wù)端渲染應(yīng)用程序中運(yùn)行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序，需要處于 Node.js server 運(yùn)行環(huán)境；
更多的服務(wù)器負(fù)載：在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源，因此如果你預(yù)料在高流量環(huán)境下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負(fù)載，并明智地采用緩存策略。
如果你的項(xiàng)目的 SEO 和 首屏渲染是評價項(xiàng)目的關(guān)鍵指標(biāo)，那么你的項(xiàng)目就需要服務(wù)端渲染來幫助你實(shí)現(xiàn)最佳的初始加載性能和 SEO。如果你的 Vue 項(xiàng)目只需改善少數(shù)營銷頁面（例如 ?/products， /about，?/contact?等）的 SEO，那么你可能需要預(yù)渲染，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點(diǎn)是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個完全靜態(tài)的站點(diǎn)，具體你可以使用 prerender-spa-plugin?就可以輕松地添加預(yù)渲染 。

優(yōu)點(diǎn)：
保證性能下限： 框架的虛擬 DOM 需要適配任何上層 API 可能產(chǎn)生的操作，它的一些 DOM 操作的實(shí)現(xiàn)必須是普適的，所以它的性能并不是最優(yōu)的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虛擬 DOM 至少可以保證在你不需要手動優(yōu)化的情況下，依然可以提供還不錯的性能，即保證性能的下限；
無需手動操作 DOM： 我們不再需要手動去操作 DOM，只需要寫好 View-Model 的代碼邏輯，框架會根據(jù)虛擬 DOM 和 數(shù)據(jù)雙向綁定，幫我們以可預(yù)期的方式更新視圖，極大提高我們的開發(fā)效率；
跨平臺： 虛擬 DOM 本質(zhì)上是 JavaScript 對象,而 DOM 與平臺強(qiáng)相關(guān)，相比之下虛擬 DOM 可以進(jìn)行更方便地跨平臺操作，例如服務(wù)器渲染、weex 開發(fā)等等。
缺點(diǎn):
無法進(jìn)行極致優(yōu)化： 雖然虛擬 DOM + 合理的優(yōu)化，足以應(yīng)對絕大部分應(yīng)用的性能需求，但在一些性能要求極高的應(yīng)用中虛擬 DOM 無法進(jìn)行針對性的極致優(yōu)化。

虛擬 DOM 的實(shí)現(xiàn)原理主要包括以下 3 部分：
①用 JavaScript 對象模擬真實(shí) DOM 樹，對真實(shí) DOM 進(jìn)行抽象；
②diff 算法 — 比較兩棵虛擬 DOM 樹的差異；
③pach 算法 — 將兩個虛擬 DOM 對象的差異應(yīng)用到真正的 DOM 樹。

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

2.Webpack 層面的優(yōu)化
Webpack 對圖片進(jìn)行壓縮
減少 ES6 轉(zhuǎn)為 ES5 的冗余代碼
提取公共代碼
模板預(yù)編譯
提取組件的 CSS
優(yōu)化 SourceMap
構(gòu)建結(jié)果輸出分析
Vue 項(xiàng)目的編譯優(yōu)化

3.基礎(chǔ)的 Web 技術(shù)的優(yōu)化
開啟 gzip 壓縮
瀏覽器緩存
CDN 的使用
使用 Chrome Performance 查找性能瓶頸

1.監(jiān)測機(jī)制的改變
Vue3.0 將帶來基于代理 Proxy?的 observer 實(shí)現(xiàn)，提供全語言覆蓋的反應(yīng)性跟蹤。這消除了 Vue 2 當(dāng)中基于 Object.defineProperty 的實(shí)現(xiàn)所存在的很多限制：①只能監(jiān)測屬性，不能監(jiān)測對象；②檢測屬性的添加和刪除；③檢測數(shù)組索引和長度的變更；④支持 Map、Set、WeakMap 和 WeakSet。
新的 observer 還提供了以下特性：
用于創(chuàng)建 observable 的公開 API。這為中小規(guī)模場景提供了簡單輕量級的跨組件狀態(tài)管理解決方案。
默認(rèn)采用惰性觀察。在 2.x 中，不管反應(yīng)式數(shù)據(jù)有多大，都會在啟動時被觀察到。如果你的數(shù)據(jù)集很大，這可能會在應(yīng)用啟動時帶來明顯的開銷。在 3.x 中，只觀察用于渲染應(yīng)用程序最初可見部分的數(shù)據(jù)。
更精確的變更通知。在 2.x 中，通過 Vue.set 強(qiáng)制添加新屬性將導(dǎo)致依賴于該對象的 watcher 收到變更通知。在 3.x 中，只有依賴于特定屬性的 watcher 才會收到通知。
不可變的 observable：我們可以創(chuàng)建值的“不可變”版本（即使是嵌套屬性），除非系統(tǒng)在內(nèi)部暫時將其“解禁”。這個機(jī)制可用于凍結(jié) prop 傳遞或 Vuex 狀態(tài)樹以外的變化。
更好的調(diào)試功能：我們可以使用新的 renderTracked 和 renderTriggered 鉤子精確地跟蹤組件在什么時候以及為什么重新渲染。

2.模板
模板方面沒有大的變更，只改了作用域插槽，2.x 的機(jī)制導(dǎo)致作用域插槽變了，父組件會重新渲染，而 3.0 把作用域插槽改成了函數(shù)的方式，這樣只會影響子組件的重新渲染，提升了渲染的性能。
同時，對于 render 函數(shù)的方面，vue3.0 也會進(jìn)行一系列更改來方便習(xí)慣直接使用 api 來生成 vdom 。
3.對象式的組件聲明方式
vue2.x 中的組件是通過聲明的方式傳入一系列 option，和 TypeScript 的結(jié)合需要通過一些裝飾器的方式來做，雖然能實(shí)現(xiàn)功能，但是比較麻煩。3.0 修改了組件的聲明方式，改成了類式的寫法，這樣使得和 TypeScript 的結(jié)合變得很容易。
此外，vue 的源碼也改用了 TypeScript 來寫。其實(shí)當(dāng)代碼的功能復(fù)雜之后，必須有一個靜態(tài)類型系統(tǒng)來做一些輔助管理。現(xiàn)在 vue3.0 也全面改用 TypeScript 來重寫了，更是使得對外暴露的 api 更容易結(jié)合 TypeScript。靜態(tài)類型系統(tǒng)對于復(fù)雜代碼的維護(hù)確實(shí)很有必要。
4.其它方面的更改
vue3.0 的改變是全面的，上面只涉及到主要的 3 個方面，還有一些其它的更改：
支持自定義渲染器，從而使得 weex 可以通過自定義渲染器的方式來擴(kuò)展，而不是直接 fork 源碼來改的方式。
支持 Fragment（多個根節(jié)點(diǎn)）和 Protal（在 dom 其它部分渲染組建內(nèi)容）組件，針對一些特殊的場景做了處理。
基于 treeshaking 優(yōu)化，提供了更多的內(nèi)置功能。

1.router-link

**不帶參數(shù)** 
 
 //name,path都行, 建議用name  
// 注意：router-link中鏈接如果是"/"開始就是從根路由開始，如果開始不帶"/"，則從當(dāng)前路由開始。 
帶參數(shù)
       
// params傳參數(shù) (類似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id" 
// 不配置path ,第一次可請求,刷新頁面id會消失
// 配置path,刷新頁面id會保留     
// html 取參  $route.params.id
// script 取參  this.$route.params.id 
 
// query傳參數(shù) (類似get,url后面會顯示參數(shù))
// 路由可不配置
// html 取參  $route.query.id
// script 取參  this.$route.query.id

2.this.$router.push() (函數(shù)里面調(diào)用)

不帶參數(shù) 
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區(qū)別

query類似 get, 跳轉(zhuǎn)之后頁面 url后面會拼接參數(shù),類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params刷新頁面id還在 
params類似 post, 跳轉(zhuǎn)之后頁面 url后面不會拼接參數(shù) , 但是刷新頁面id 會消失

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

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

1.css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫入scoped即可 例如：

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

3.$route和$router的區(qū)別
答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實(shí)例”對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等。

4.vue.js的兩個核心是什么？
答：數(shù)據(jù)驅(qū)動、組件系統(tǒng)

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

6.vue常用的修飾符？
答：.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)；.capture: 事件偵聽，事件發(fā)生的時候會調(diào)用

7.v-on 可以綁定多個方法嗎？
答：可以

8.vue中 key 值的作用？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序， 而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。

9.什么是vue的計(jì)算屬性？
答：在模板中放入太多的邏輯會讓模板過重且難以維護(hù)，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下，盡量采取計(jì)算屬性的方式。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰；②依賴于數(shù)據(jù)，數(shù)據(jù)更新，處理結(jié)果自動更新；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時，直接寫計(jì)算屬性名即可；⑤常用的是getter方法，獲取數(shù)據(jù)，也可以使用set方法改變數(shù)據(jù)；⑥相較于methods，不管依賴的數(shù)據(jù)變不變，methods都會重新計(jì)算，但是依賴數(shù)據(jù)不變的時候computed從緩存中獲取，不會重新計(jì)算。

10.vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件，核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM、數(shù)據(jù)驅(qū)動、組件化、輕量、簡潔、高效、快速、模塊友好。
缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優(yōu)化（如果要支持SEO，建議通過服務(wù)端來進(jìn)行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)、后退。

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

面試官：聊聊，你寫過最復(fù)雜的一個功能組件？遇到了哪些困難？最后是怎樣解決的？

有部分內(nèi)容來自網(wǎng)絡(luò)，如有涉及侵權(quán)，私信聯(lián)系刪除。
Vue面試中，經(jīng)常會被問到的面試題/Vue知識點(diǎn)整理（第一版）
532道前端真實(shí)大廠面試題
學(xué)習(xí)ES6筆記──工作中常用到的ES6語法