<meta name="source" content="lake">
https://www.yuque.com/docs/share/6bb4199b-b011-45e2-87d2-f289c0fb7639
https://www.yuque.com/yanghui-xazj3/uu7edw/hdby7k

vue相關(guān)

1.vue生命周期

什么是Vue生命周期？

Vue 實(shí)例從創(chuàng)建到銷毀的過程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期

Vue生命周期的作用是什么？

它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯

Vue生命周期總共有幾個(gè)階段？

它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后

第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

第一次頁面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子

DOM渲染在哪個(gè)周期中就已經(jīng)完成？

DOM 渲染在 mounted 中就已經(jīng)完成了

每個(gè)生命周期適合哪些場景？

生命周期鉤子的一些使用方法：

beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)

created : 初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用

mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)

updated : 如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)

beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框

nextTick : 更新數(shù)據(jù)后立即操作dom

• beforeCreate階段：vue實(shí)例的掛載元素el和數(shù)據(jù)對(duì)象data都是undefined，還沒有初始化。
• created階段：vue實(shí)例的數(shù)據(jù)對(duì)象data有了，可以訪問里面的數(shù)據(jù)和方法，未掛載到DOM，el還沒有
• beforeMount階段：vue實(shí)例的el和data都初始化了，但是掛載之前為虛擬的dom節(jié)點(diǎn)
• mounted階段：vue實(shí)例掛載到真實(shí)DOM上，就可以通過DOM獲取DOM節(jié)點(diǎn)
• beforeUpdate階段：響應(yīng)式數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM打補(bǔ)丁之前，適合在更新之前訪問現(xiàn)有的DOM，比如手動(dòng)移除已添加的事件監(jiān)聽器
• updated階段：虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用，組成新的DOM已經(jīng)更新，避免在這個(gè)鉤子函數(shù)中操作數(shù)據(jù)，防止死循環(huán)
• beforeDestroy階段：實(shí)例銷毀前調(diào)用，實(shí)例還可以用，this能獲取到實(shí)例，常用于銷毀定時(shí)器，解綁事件
• destroyed階段：實(shí)例銷毀后調(diào)用，調(diào)用后所有事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例都會(huì)被銷毀

2.v-show與v-if區(qū)別

v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建

使用 頻繁切換時(shí)用v-show，運(yùn)行時(shí)較少改變時(shí)用v-if

v-if=‘false’ v-if是條件渲染，當(dāng)false的時(shí)候不會(huì)渲染

3.MVVM相關(guān)

vue采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty劫持data屬性的setter，getter，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

MVVM

M - Model，Model 代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯

V - View，View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為 UI 展現(xiàn)出來

VM - ViewModel，ViewModel 監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡單理解就是一個(gè)同步 View 和 Model 的對(duì)象，連接 Model 和 View

image.png

• View 接收用戶交互請(qǐng)求
• View 將請(qǐng)求轉(zhuǎn)交給ViewModel
• ViewModel 操作Model數(shù)據(jù)更新
• Model 更新完數(shù)據(jù)，通知ViewModel數(shù)據(jù)發(fā)生變化
• ViewModel 更新View數(shù)據(jù)

MVC

• View 接受用戶交互請(qǐng)求
• View 將請(qǐng)求轉(zhuǎn)交給Controller處理
• Controller 操作Model進(jìn)行數(shù)據(jù)更新保存
• 數(shù)據(jù)更新保存之后，Model會(huì)通知View更新
• View 更新變化數(shù)據(jù)使用戶得到反饋

image.png

MVVM模式和MVC有些類似，但有以下不同

• ViewModel 替換了 Controller，在UI層之下
• ViewModel 向 View 暴露它所需要的數(shù)據(jù)和指令對(duì)象
• ViewModel 接收來自 Model 的數(shù)據(jù)

概括起來，MVVM是由MVC發(fā)展而來，通過在Model之上而在View之下增加一個(gè)非視覺的組件將來自Model的數(shù)據(jù)映射到View中。

image.png

image.png

4.說說你對(duì) SPA 單頁面的理解，它的優(yōu)缺點(diǎn)分別是什么？

SPA（ single-page application ）僅在 Web 頁面初始化時(shí)加載相應(yīng)的 HTML、JavaScript 和 CSS。一旦頁面加載完成，SPA 不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁面的重新加載或跳轉(zhuǎn)；取而代之的是利用路由機(jī)制實(shí)現(xiàn) HTML 內(nèi)容的變換，UI 與用戶的交互，避免頁面的重新加載。

優(yōu)點(diǎn)：

• 用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁面，避免了不必要的跳轉(zhuǎn)和重復(fù)渲染；
• 基于上面一點(diǎn)，SPA 相對(duì)對(duì)服務(wù)器壓力?。?/li>
• 前后端職責(zé)分離，架構(gòu)清晰，前端進(jìn)行交互邏輯，后端負(fù)責(zé)數(shù)據(jù)處理；

缺點(diǎn)：

• 初次加載耗時(shí)多：為實(shí)現(xiàn)單頁 Web 應(yīng)用功能及顯示效果，需要在加載頁面的時(shí)候?qū)?JavaScript、CSS 統(tǒng)一加載，部分頁面按需加載；
• 前進(jìn)后退路由管理：由于單頁應(yīng)用在一個(gè)頁面中顯示所有的內(nèi)容，所以不能使用瀏覽器的前進(jìn)后退功能，所有的頁面切換需要自己建立堆棧管理；
• SEO 難度較大：由于所有的內(nèi)容都在一個(gè)頁面中動(dòng)態(tài)替換顯示，所以在 SEO 上其有著天然的弱勢。

5、computed 和 watch 的區(qū)別和運(yùn)用的場景？

computed： 是計(jì)算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時(shí)才會(huì)重新計(jì)算 computed 的值；

watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時(shí)都會(huì)執(zhí)行回調(diào)進(jìn)行后續(xù)操作；

運(yùn)用場景：

• 當(dāng)我們需要進(jìn)行數(shù)值計(jì)算，并且依賴于其它數(shù)據(jù)時(shí)，應(yīng)該使用 computed，因?yàn)榭梢岳?computed 的緩存特性，避免每次獲取值時(shí)，都要重新計(jì)算；

• 當(dāng)我們需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，應(yīng)該使用 watch，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 ( 訪問一個(gè) API )，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無法做到的。

computed的原理？

computed 本質(zhì)是一個(gè)惰性求值的觀察者。

computed 內(nèi)部實(shí)現(xiàn)了一個(gè)惰性的 watcher,也就是 computed watcher,computed watcher 不會(huì)立刻求值,同時(shí)持有一個(gè) dep 實(shí)例。

其內(nèi)部通過 this.dirty 屬性標(biāo)記計(jì)算屬性是否需要重新求值。

當(dāng) computed 的依賴狀態(tài)發(fā)生改變時(shí),就會(huì)通知這個(gè)惰性的 watcher,

computed watcher 通過 this.dep.subs.length 判斷有沒有訂閱者,

有的話,會(huì)重新計(jì)算,然后對(duì)比新舊值,如果變化了,會(huì)重新渲染。 (Vue 想確保不僅僅是計(jì)算屬性依賴的值發(fā)生變 化，而是當(dāng)計(jì)算屬性最終計(jì)算的值發(fā)生變化時(shí)才會(huì)觸發(fā)渲染 watcher 重新渲染，本質(zhì)上是一種優(yōu)化。)

沒有的話,僅僅把 this.dirty = true。 (當(dāng)計(jì)算屬性依賴于其他數(shù)據(jù)時(shí)，屬性并不會(huì)立即重新計(jì)算，只有之后其他 地方需要讀取屬性的時(shí)候，它才會(huì)真正計(jì)算，即具備 lazy（懶計(jì)算）特性。)

6.v-model 的原理

我們?cè)?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 作為事件。

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><input v-model='something'> 相當(dāng)于 <input v-bind:value="something" v-on:input="something = $event.target.value"></pre>

image.png

7.VUE和REACT 的區(qū)別？

react整體是函數(shù)式的思想，把組件設(shè)計(jì)成純組件，狀態(tài)和邏輯通過參數(shù)傳入，所以在react中，是單向數(shù)據(jù)流；

vue的思想是響應(yīng)式的，也就是基于是數(shù)據(jù)可變的，通過對(duì)每一個(gè)屬性建立Watcher來監(jiān)聽，當(dāng)屬性變化的時(shí)候，響應(yīng)式的更新對(duì)應(yīng)的虛擬dom。

具體參照：

https://juejin.im/post/5e153e096fb9a048297390c1

8. 為什么在 Vue3.0 采用了 Proxy,拋棄了 Object.defineProperty？

Object.defineProperty 只能劫持對(duì)象的屬性,因此我們需要對(duì)每個(gè)對(duì)象的每個(gè)屬性進(jìn)行遍歷。Vue 2.x 里,是通過 遞歸 + 遍歷 data 對(duì)象來實(shí)現(xiàn)對(duì)數(shù)據(jù)的監(jiān)控的,如果屬性值也是對(duì)象那么需要深度遍歷,顯然如果能劫持一個(gè)完整的對(duì)象是才是更好的選擇。

Proxy 可以劫持整個(gè)對(duì)象,并返回一個(gè)新的對(duì)象。Proxy 不僅可以代理對(duì)象,還可以代理數(shù)組。還可以代理動(dòng)態(tài)增加的屬性。

Proxy 的優(yōu)勢如下:

• Proxy 可以直接監(jiān)聽對(duì)象而非屬性；
• Proxy 可以直接監(jiān)聽數(shù)組的變化；
• Proxy 有多達(dá) 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
• Proxy 返回的是一個(gè)新對(duì)象,我們可以只操作新的對(duì)象達(dá)到目的,而 Object.defineProperty 只能遍歷對(duì)象屬性直接修改；
• Proxy 作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化，也就是傳說中的新標(biāo)準(zhǔn)的性能紅利；

Object.defineProperty 的優(yōu)勢如下:

• 兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個(gè)大版本( 3.0 )才能用 Proxy 重寫。

image.png

9. Vue 組件 data 為什么必須是函數(shù) ?

因?yàn)榻M件是可以復(fù)用的,JS 里對(duì)象是引用關(guān)系,如果組件 data 是一個(gè)對(duì)象,那么子組件中的 data 屬性值會(huì)互相污染,產(chǎn)生副作用。

所以一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù),因此每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝。new Vue 的實(shí)例是不會(huì)被復(fù)用的,因此不存在以上問題。

10、談?wù)勀銓?duì) keep-alive 的了解？

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，避免重新渲染 ，其有以下特性：

• 一般結(jié)合路由和動(dòng)態(tài)組件一起使用，用于緩存組件；
• 提供 include 和 exclude 屬性，兩者都支持字符串或正則表達(dá)式， include 表示只有名稱匹配的組件會(huì)被緩存，exclude 表示任何名稱匹配的組件都不會(huì)被緩存 ，其中 exclude 的優(yōu)先級(jí)比 include 高；
• 對(duì)應(yīng)兩個(gè)鉤子函數(shù) activated 和 deactivated ，當(dāng)組件被激活時(shí)，觸發(fā)鉤子函數(shù) activated，當(dāng)組件被移除時(shí)，觸發(fā)鉤子函數(shù) deactivated。

11、Vue 組件間通信有哪幾種方式？

<u>（1）props / $emit 適用 父子組件通</u><u>信</u>

這種方法是 Vue 組件的基礎(chǔ)，相信大部分同學(xué)耳聞能詳，所以此處就不舉例展開介紹。

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

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

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

這種方法通過一個(gè)空的 Vue 實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件，從而實(shí)現(xiàn)任何組件間的通信，包括父子、隔代、兄弟組件

（4）$attrs/$listeners 適用于 隔代組件通信

• $attrs：包含了父作用域中不被 prop 所識(shí)別 (且獲取) 的特性綁定 ( class 和 style 除外 )。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會(huì)包含所有父作用域的綁定 ( 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 主要解決了跨級(jí)組件間的通信問題，不過它的使用場景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。

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

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

• Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
• 改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

12.請(qǐng)介紹一下你對(duì)vuex的理解？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) ( state )。

（1）Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

（2）改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

主要包括以下幾個(gè)模塊：

• State：定義了應(yīng)用狀態(tài)的數(shù)據(jù)結(jié)構(gòu)，可以在這里設(shè)置默認(rèn)的初始狀態(tài)。
• Getter：允許組件從 Store 中獲取數(shù)據(jù)，mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性。
• Mutation：是唯一更改 store 中狀態(tài)的方法，且必須是同步函數(shù)。
• Action：用于提交 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作。
• Module：允許將單一的 Store 拆分為多個(gè) store 且同時(shí)保存在單一的狀態(tài)樹中。

VUEX實(shí)現(xiàn)原理？ （課程中的代碼）

13.請(qǐng)介紹一下你對(duì)vue-router的理解？

vue-router****實(shí)現(xiàn)原理？ （課程中的代碼）

vue-router 有 3 種路由模式：hash、history、abstract，

• hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；

• history : 依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式；

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

1）hash 模式的實(shí)現(xiàn)原理

早期的前端路由的實(shí)現(xiàn)就是基于 location.hash 來實(shí)現(xiàn)的。其實(shí)現(xiàn)原理很簡單，location.hash 的值就是 URL 中 # 后面的內(nèi)容。比如下面這個(gè)網(wǎng)站，它的 location.hash 的值為 '#search'：

hash 路由模式的實(shí)現(xiàn)主要是基于下面幾個(gè)特性：

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

（2）history 模式的實(shí)現(xiàn)原理

HTML5 提供了 History API 來實(shí)現(xiàn) URL 的變化。其中做最主要的 API 有以下兩個(gè)：history.pushState() 和 history.repalceState()。這兩個(gè) API 可以在不進(jìn)行刷新的情況下，操作瀏覽器的歷史紀(jì)錄。唯一不同的是，前者是新增一個(gè)歷史記錄，后者是直接替換當(dāng)前的歷史記錄，如下所示：

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">window.history.pushState(null, null, path); window.history.replaceState(null, null, path);</pre>

history 路由模式的實(shí)現(xiàn)主要基于存在下面幾個(gè)特性：

• pushState 和 repalceState 兩個(gè) API 來操作實(shí)現(xiàn) URL 的變化 ；
• 我們可以使用 popstate 事件來監(jiān)聽 url 的變化，從而對(duì)頁面進(jìn)行跳轉(zhuǎn)（渲染）；
• history.pushState() 或 history.replaceState() 不會(huì)觸發(fā) popstate 事件，這時(shí)我們需要手動(dòng)觸發(fā)頁面跳轉(zhuǎn)（渲染）。

導(dǎo)航鉤子函數(shù)（導(dǎo)航守衛(wèi)）？

• 全局守衛(wèi)

1. router.beforeEach 全局前置守衛(wèi) 進(jìn)入路由之前
2. router.beforeResolve 全局解析守衛(wèi)(2.5.0+) 在beforeRouteEnter調(diào)用之后調(diào)用
3. router.afterEach 全局后置鉤子 進(jìn)入路由之后

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">// main.js 入口文件 import router from './router'; // 引入路由 router.beforeEach((to, from, next) => { next(); }); router.beforeResolve((to, from, next) => { next(); }); router.afterEach((to, from) => { console.log('afterEach 全局后置鉤子'); }); </pre>

• 路由獨(dú)享的守衛(wèi) 你可以在路由配置上直接定義 beforeEnter 守衛(wèi)

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) </pre>

• 組件內(nèi)的守衛(wèi) 你可以在路由組件內(nèi)直接定義以下路由導(dǎo)航守衛(wèi)

<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">const Foo = { template: ..., beforeRouteEnter (to, from, next) { // 在渲染該組件的對(duì)應(yīng)路由被 confirm 前調(diào)用 // 不！能！獲取組件實(shí)例 this // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建 }, beforeRouteUpdate (to, from, next) { // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用 // 舉例來說，對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候， // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。 // 可以訪問組件實(shí)例 this }, beforeRouteLeave (to, from, next) { // 導(dǎo)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用，我們用它來禁止用戶離開 // 可以訪問組件實(shí)例 this // 比如還未保存草稿，或者在用戶離開前， 將setInterval銷毀，防止離開之后，定時(shí)器還在調(diào)用。 } } </pre>

14、Vue 中的 key 有什么作用？

Vue 中 key 的作用是：key 是為 Vue 中 vnode 的唯一標(biāo)記，通過這個(gè) key，我們的 diff 操作可以更準(zhǔn)確、更快速

更準(zhǔn)確：因?yàn)閹?key 就不是就地復(fù)用了，在 sameNode 函數(shù) a.key === b.key 對(duì)比中可以避免就地復(fù)用的情況。所以會(huì)更加準(zhǔn)確。

更快速：利用 key 的唯一性生成 map 對(duì)象來獲取對(duì)應(yīng)節(jié)點(diǎn)，比遍歷方式更快，

15.ref的作用

1. 獲取dom元素this.$refs.box
2. 獲取子組件中的datathis.$refs.box.msg
3. 調(diào)用子組件中的方法this.$refs.box.open()