1.20 Vue-router 有哪幾種路由守衛(wèi)?

1. 全局守衛(wèi)：beforeEach
2. 后置守衛(wèi)：afterEach
3. 全局解析守衛(wèi)：beforeResolve
4. 路由獨(dú)享守衛(wèi)：beforeEnter

1.21 Vue-router 的鉤子函數(shù)都有哪些?

關(guān)于 vue-router 中的鉤子函數(shù)主要分為 3 類(lèi)

• 全局鉤子函數(shù)要beforeEach 函數(shù)有三個(gè)參數(shù),分別是

1. to:router 即將進(jìn)入的路由對(duì)象
2. from:當(dāng)前導(dǎo)航即將離開(kāi)的路由
3. next:function,進(jìn)行管道中的一個(gè)鉤子，如果執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）否則為 false,終止導(dǎo)航

• 單獨(dú)路由獨(dú)享組件
  beforeEnter

• 組件內(nèi)鉤子

  1. beforeRouterEnter
  2. beforeRouterUpdate
  3. beforeRouterLeave

1.22 vue-router 路由模式有幾種？

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

• hash: 使用 URL hash 值來(lái)作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器；
• history : 依賴(lài) HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式；
• abstract : 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒(méi)有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式.

1.23 說(shuō)下 vue-router 中常用的 hash 和 history 路由模式實(shí)現(xiàn)原理嗎？

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

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

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

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

1.24 vuex 包括幾個(gè)模塊

Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）?！皊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)的變化。

• 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)樹(shù)中

1.25 Object.defineProperty 和 Proxy 的區(qū)別

Object.defineProperty 和 Proxy 的區(qū)別如下:

1. Proxy 可以直接監(jiān)聽(tīng)對(duì)象而非屬性；
2. Proxy 可以直接監(jiān)聽(tīng)數(shù)組的變化；
3. Proxy 有多達(dá) 13 種攔截方法,不限于 apply、ownKeys、deleteProperty、has 等等 是 Object.defineProperty 不具備的
4. Proxy 返回的是一個(gè)新對(duì)象,我們可以只操作新的對(duì)象達(dá)到目的,而 Object.defineProperty 只能遍歷對(duì)象屬性直接修改
5. Proxy 作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化，也就是傳說(shuō)中的新標(biāo)準(zhǔn) 的性能紅利
6. Object.defineProperty 兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問(wèn)題, 而且無(wú)法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個(gè)大版本( 3.0 )才能用 Proxy 重 寫(xiě)

1.26 MVVM 和 MVC 區(qū)別是什么？哪些場(chǎng)景適合？

1、基本定義

MVVM 即 Model-View-ViewModel 的簡(jiǎn)寫(xiě)，即模型-視圖-視圖模型，模型（Model） 指的是后端傳遞的數(shù)據(jù)，視圖(View)指的是所看到的頁(yè)面，視圖模型(ViewModel)是 mvvm 模式 的核心，它是連接 view 和 model 的橋梁。它有兩個(gè)方向：

1. 一是將模型（Model）轉(zhuǎn)化成視圖(View)，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到 的頁(yè)面，實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定
2. 二是將視圖(View)轉(zhuǎn)化成模型(Model)，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。 實(shí)現(xiàn)的方式是：DOM 事件監(jiān)聽(tīng)，這兩個(gè)方向都實(shí)現(xiàn)的，我們稱(chēng)之為數(shù)據(jù)的雙向綁定
3. MVC 基本定義 MVC 是 Model-View- Controller 的簡(jiǎn)寫(xiě)。即模型-視圖-控制器。M 和 V 指的意思和 MVVM 中的 M 和 V 意思一樣。C 即 Controller 指的是頁(yè)面業(yè)務(wù)邏輯，使用 MVC 的目的就是將 M 和 V 的代碼分離。MVC 是單向通信。也就是 View 跟 Model，必須通過(guò) Controller 來(lái)承上啟 下

2、使用場(chǎng)景

主要就是 MVC 中 Controller 演變成 MVVM 中的 viewModel，MVVM 主要解決了 MVC中大量的 DOM 操作使頁(yè)面渲染性能降低，加載速度變慢，影響用戶(hù)體驗(yàn)，vue 數(shù)據(jù)驅(qū)動(dòng)，通 過(guò)數(shù)據(jù)來(lái)顯示視圖層而不是節(jié)點(diǎn)操作， 場(chǎng)景：數(shù)據(jù)操作比較多的場(chǎng)景，需要大量操作 DOM 元 素時(shí)，采用 MVVM 的開(kāi)發(fā)方式，會(huì)更加便捷，讓開(kāi)發(fā)者更多的精力放在數(shù)據(jù)的變化上，解放繁 瑣的操作 DOM 元素

3、兩者之間的區(qū)別

MVC 和 MVVM 其實(shí)區(qū)別并不大，都是一種設(shè)計(jì)思想， MVC 和 MVVM 的區(qū)別并不是VM 完全取代了 C，只是在 MVC 的基礎(chǔ)上增加了一層 VM，只不過(guò)是弱化了 C 的概念， ViewModel 存在目的在于抽離 Controller 中展示的業(yè)務(wù)邏輯，而不是替代 Controller，其它視圖 操作業(yè)務(wù)等還是應(yīng)該放在 Controller 中實(shí)現(xiàn)，也就是說(shuō) MVVM 實(shí)現(xiàn)的是業(yè)務(wù)邏輯組件的重用， 使開(kāi)發(fā)更高效，結(jié)構(gòu)更清晰，增加代碼的復(fù)用性

1.27 vue 中如何重置 data?

要初始化 data 中的數(shù)據(jù)，可以使用 Object.assign()方法，實(shí)現(xiàn)重置 data 中的數(shù)據(jù)，以下就是對(duì)該方法的詳細(xì)介紹，以及如何使用該方法，重置 data 中的數(shù)據(jù)

1. Object.assign()方法基本定義
2. Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目 標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
3. 用法： Object.assign(target, …sources)，第一個(gè)參數(shù)是目標(biāo)對(duì)象，第二個(gè)參數(shù) 是源對(duì)象，就是將源對(duì)象屬性復(fù)制到目標(biāo)對(duì)象，返回目標(biāo)對(duì)象

1.28 vue3 新特性有哪些？

1、性能提升

• 響應(yīng)式性能提升，由原來(lái)的 Object.defineProperty 改為基于ES6的 Proxy ，使其速度更快，消除警告。
• 重寫(xiě)了 Vdom ，突破了 Vdom 的性能瓶頸。
• 進(jìn)行模板編譯優(yōu)化。
• 更加高效的組件初始化

2、更好的支持 typeScript

• 有更好的類(lèi)型推斷，使得 Vue3 把 typeScript 支持得非常好

3、新增Composition API

• Composition API 是 vue3 新增的功能，比 mixin 更強(qiáng)大。它可以把各個(gè)功能模塊獨(dú)立開(kāi)來(lái)，提高代碼邏輯的可復(fù)用性，同時(shí)代碼壓縮性更強(qiáng)

4、新增組件

• Fragment 不再限制 template 只有一個(gè)根幾點(diǎn)。
• Teleport 傳送門(mén)，允許我們將控制的內(nèi)容傳送到任意的 DOM 中。
• Supense 等待異步組件時(shí)渲染一些額外的內(nèi)容，讓?xiě)?yīng)用有更好的用戶(hù)體驗(yàn)。

5、Tree-shaking：支持搖樹(shù)優(yōu)化

• 搖樹(shù)優(yōu)化后會(huì)將不需要的模塊修剪掉，真正需要的模塊打到包內(nèi)。優(yōu)化后的項(xiàng)目體積只有原來(lái)的一半，加載速度更快

6、Custom Renderer API： 自定義渲染器

• 實(shí)現(xiàn) DOM 的方式進(jìn)行 WebGL 編程

1.29 vue3 組合式API生命周期鉤子函數(shù)有變化嗎?

setup 是圍繞 beforeCreate 和 created 生命周期鉤子運(yùn)行的，所以不需要顯示的定義它們。其他的鉤子都可以編寫(xiě)到 setup 內(nèi)

1.30 watch 和 watchEffect 的區(qū)別？

watch 和 watchEffect 都是監(jiān)聽(tīng)器，watchEffect 是一個(gè)副作用函數(shù)。它們之間的區(qū)別有：

1. watch 需要傳入監(jiān)聽(tīng)的數(shù)據(jù)源，而 watchEffect 可以自動(dòng)手機(jī)數(shù)據(jù)源作為依賴(lài)。
2. watch 可以訪問(wèn)倒改變之前和之后的值，watchEffect 只能獲取改變后的值。
3. watch 運(yùn)行的時(shí)候不會(huì)立即執(zhí)行，值改變后才會(huì)執(zhí)行，而 watchEffect 運(yùn)行后可立即執(zhí)行。這一點(diǎn)可以通過(guò) watch 的配置項(xiàng) immediate 改變。