【直接收藏】前端 VUE 高階面試題（二）
44.vuex的數(shù)據(jù)丟失知道嗎 ?怎么解決
原理：可以利用緩存，將vuex中的state，在緩存中備份一下，當(dāng)狀態(tài)發(fā)生改變時(shí)，同步緩存的的備份。同時(shí)當(dāng)刷新時(shí)，去緩存中的備份，給state賦值
實(shí)際開(kāi)發(fā)中我們一般利用vuex一個(gè)插件來(lái)實(shí)現(xiàn) vuex-persistedstate
具體代碼如下
安裝
使用
45.vuex怎么拿數(shù)據(jù)
獲取vuex state中的count數(shù)據(jù)方法有：
方法1：this.$store.state.count 直接使用；
獲取vuex getters中g(shù)etCount數(shù)據(jù)的方法：
方法1：this.$store.getters.getCount直接使用。
46.說(shuō)說(shuō)Vuex原理
? vuex 是一個(gè)專門為 vue 構(gòu)建的狀態(tài)管理工具，主要是為了解決 多組間之間狀態(tài)共享問(wèn)題。強(qiáng)調(diào)的是集中式管理，（組件與組件之間的關(guān)系變成了組件與倉(cāng)庫(kù)之間的關(guān)系）
vuex 的核心包括：state（存放狀態(tài)）、mutations（同步的更改狀態(tài)）、actions（發(fā)送異步請(qǐng)求，拿到數(shù)據(jù)）、getters（根據(jù)之前的狀態(tài)派發(fā)新的狀態(tài)）、modules（模塊劃分） state 發(fā)布一條新的數(shù)據(jù)，在 getters 里面根據(jù)狀態(tài)派發(fā)新的狀態(tài)，actions 發(fā)送異步請(qǐng)求獲取數(shù)據(jù)，然后在 mutations 里面同步的更改數(shù)據(jù) 應(yīng)用場(chǎng)合：購(gòu)物車的數(shù)據(jù)共享、登入注冊(cè)
47.vuex倉(cāng)庫(kù)數(shù)據(jù)很多，怎么管理
使用moduls模塊劃分和文件拆分來(lái)管理數(shù)據(jù)很多的問(wèn)題。例如：我們可以在modules中進(jìn)行模塊劃分，比如用戶相關(guān)模塊放入user中，文章信息相關(guān)模塊放入article中。
代碼如下：
48.vuex做數(shù)據(jù)集中管理，mutations和actions分別是做什么的，為什么不能用mutations處理異步數(shù)據(jù)
mutations和actions分別是做什么的?
mutations和action都是用來(lái)改變Vuex store的狀態(tài)的；mutations提供的回調(diào)函數(shù)是同步的；而actions提供的方法是異步的，此外，actions的方法最終還是通過(guò)調(diào)用mutations的方法來(lái)實(shí)現(xiàn)修改vuex的狀態(tài)的。
為什么不能用mutations處理異步數(shù)據(jù)?
官方文檔說(shuō)明：“在 mutation 中混合異步調(diào)用會(huì)導(dǎo)致你的程序很難調(diào)試。例如，當(dāng)你能調(diào)用了兩個(gè)包含異步回調(diào)的 mutation 來(lái)改變狀態(tài)，你怎么知道什么時(shí)候回調(diào)和哪個(gè)先回調(diào)呢？這就是為什么我們要區(qū)分這兩個(gè)概念。在 Vuex 中，我們將全部的改變都用同步方式實(shí)現(xiàn)。我們將全部的異步操作都放在Actions中。”
actions 和 mutations 并不是為了解決競(jìng)態(tài)問(wèn)題，而是為了能用 devtools 追蹤狀態(tài)變化。事實(shí)上在 vuex 里面 actions 只是一個(gè)架構(gòu)性的概念，并不是必須的，說(shuō)到底只是一個(gè)函數(shù)，你在里面想干嘛都可以，只要最后觸發(fā) mutation 就行。異步競(jìng)態(tài)怎么處理那是用戶自己的事情。vuex 真正限制你的只有 mutation 必須是同步的這一點(diǎn)（在 redux 里面就好像 reducer 必須同步返回下一個(gè)狀態(tài)一樣）。同步的意義在于這樣每一個(gè) mutation 執(zhí)行完成后都可以對(duì)應(yīng)到一個(gè)新的狀態(tài)（和 reducer 一樣），這樣 devtools 就可以打個(gè) snapshot 存下來(lái)，然后就可以隨便 time-travel 了。如果你開(kāi)著 devtool 調(diào)用一個(gè)異步的 action，你可以清楚地看到它所調(diào)用的 mutation 是何時(shí)被記錄下來(lái)的，并且可以立刻查看它們對(duì)應(yīng)的狀態(tài)。其實(shí)我有個(gè)點(diǎn)子一直沒(méi)時(shí)間做，那就是把記錄下來(lái)的 mutations 做成類似 rx-marble 那樣的時(shí)間線圖，對(duì)于理解應(yīng)用的異步狀態(tài)變化很有幫助。
49.vuex中actions與mutations的區(qū)別
Mutation 更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)；
Action Action 類似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態(tài)。Action 可以包含任意異步操作?？傮w來(lái)說(shuō)：actions 1、用于通過(guò)提交mutation改變數(shù)據(jù) 2、會(huì)默認(rèn)將自身封裝為一個(gè)Promise 3、可以包含任意的異步操作mutations 1、通過(guò)提交commit改變數(shù)據(jù) 2、只是一個(gè)單純的函數(shù) 3、不要使用異步操作，異步操作會(huì)導(dǎo)致變量不能追蹤
50.說(shuō)說(shuō)vue如何進(jìn)行路由配置
一、安裝
本地環(huán)境安裝路由插件vue-router：? ?cnpm install vue-router --save-dev ?
二、配置兩種配置方法：在main.js中 || 在src/router文件夾下的index.js中這里只說(shuō)在src/router/index.js中的 1.引入 import Vue from 'vue' import Router from 'vue-router' 注意這個(gè)Router是自定義的名字，這里叫這個(gè)名字后，下邊都要用到的
使用/注冊(cè)：Vue.use(Router)
配置配置路由：
引入路由對(duì)應(yīng)的組件地址：import Home from '@/components/Home'import Home from '@/components/Content’
在main.js中調(diào)用index.js的配置：import router from './router'
App.vue頁(yè)面使用（展示）路由：<!-- 展示router -->
把這個(gè)標(biāo)簽放到對(duì)應(yīng)位置：?
<router-view></router-view>路由切換（原來(lái)的<a href="XXX.html">等地方）：把切換標(biāo)簽和鏈接改成：
<router-link ?to="/">切換到Home組件</router-link><router-link ?to="/content">切換到Content組件</router-link>//這里，to里邊的參數(shù)和配置時(shí)，path的路徑一樣即可
51.談?wù)刅ue路由守衛(wèi)
?1、路由守衛(wèi) 是什么
簡(jiǎn)單來(lái)說(shuō)，導(dǎo)航守衛(wèi)就是路由跳轉(zhuǎn)前、中、后過(guò)程中的一些鉤子函數(shù)，這個(gè)函數(shù)能讓你操作一些其他的事兒，這就是導(dǎo)航守衛(wèi)。官方解釋，vue-router提供的導(dǎo)航守衛(wèi)主要用來(lái)通過(guò)跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。
2、路由守衛(wèi)分類導(dǎo)航守衛(wèi)分為：全局的、組件內(nèi)的、單個(gè)路由獨(dú)享三種
52.路由守衛(wèi)中頁(yè)面跳轉(zhuǎn)運(yùn)用了哪些鉤子函數(shù)
應(yīng)用場(chǎng)景1：可進(jìn)行一些頁(yè)面跳轉(zhuǎn)前處理，例如判斷需要登錄的頁(yè)面進(jìn)行攔截，做登錄跳轉(zhuǎn)??！
應(yīng)用場(chǎng)景2，進(jìn)入頁(yè)面登錄判斷、管理員權(quán)限判斷、瀏覽器判斷
應(yīng)用場(chǎng)景3：當(dāng)頁(yè)面中有未關(guān)閉的窗口, 或未保存的內(nèi)容時(shí), 阻止頁(yè)面跳轉(zhuǎn)
53.談?wù)刅ue路由模式，路由有哪些模式
在vue-router路由對(duì)象中，路由有兩種模式：hash和history，而默認(rèn)的是hash模式.前端路由目前主要有兩種方法：
1、利用url的hash,就是常用的錨點(diǎn)（#）操作，類似頁(yè)面中點(diǎn)擊某小圖標(biāo)，返回頁(yè)面頂部，JS通過(guò)hashChange事件來(lái)監(jiān)聽(tīng)url的改變，IE7及以下需要輪詢進(jìn)行實(shí)現(xiàn)。一般常用框架的路由機(jī)制都是用的這種方法，例如Angualrjs自帶的ngRoute和二次開(kāi)發(fā)模塊ui-router，react的react-route,vue-route…
2、利用HTML5的History模式，使url看起來(lái)類似普通網(wǎng)站，以”/”分割，沒(méi)有”#”，但頁(yè)面并沒(méi)有跳轉(zhuǎn)，不過(guò)使用這種模式需要服務(wù)器端的支持，服務(wù)器在接收到所有的請(qǐng)求后，都指向同一個(gè)html文件，通過(guò)historyAPI，監(jiān)聽(tīng)popState事件，用pushState和replaceState來(lái)實(shí)現(xiàn)。
54.路由守衛(wèi)的作用，全局和局部使用的差異是什么
全局路由守衛(wèi)：就是在整個(gè)網(wǎng)頁(yè)中，只要發(fā)生了路由的變化，都會(huì)觸發(fā)。全局導(dǎo)航守衛(wèi)主要包括兩個(gè)函數(shù)，分別為：beforeEach、afterEach。局部路由守衛(wèi):（組件內(nèi)的守衛(wèi)）只有當(dāng)前路由使用。
路由加載之前觸發(fā)：beforeRouteEnter (to, from, next)
更新路由之前觸發(fā)：beforeRouteUpdate (to, from, next)
離開(kāi)當(dāng)前路由之前觸發(fā)：beforeRouteLeave (to, from, next)
55.vue路由有哪幾種
this.$router.push(obj) 跳轉(zhuǎn)到指定url路徑，并想history棧中添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁(yè)面this.$router.replace(obj) ?跳轉(zhuǎn)到指定url路徑，但是history棧中不會(huì)有記錄this.$router.go(n) ?向前或者向后跳轉(zhuǎn)n個(gè)頁(yè)面，n可為正整數(shù)或負(fù)整數(shù)
56.說(shuō)一下vue路由跳轉(zhuǎn)方式
1、router-link 【實(shí)現(xiàn)跳轉(zhuǎn)最簡(jiǎn)單的方法】<router-link to='需要跳轉(zhuǎn)到的頁(yè)面的路徑>瀏覽器在解析時(shí)，將它解析成一個(gè)類似于<a>的標(biāo)簽。div和css樣式略
2、this.$router.push({ path:’/user’})
3、this.$router.replace{path：‘/’ }類似，不再贅述
57.vue路由的數(shù)據(jù)傳參，params，query的區(qū)別。使用params什么時(shí)候會(huì)生效，什么時(shí)候不會(huì)生效，params有時(shí)會(huì)失效，為什么
query和params區(qū)別query類似 get, 跳轉(zhuǎn)之后頁(yè)面 url后面會(huì)拼接參數(shù),類似?id=1, 非重要性的可以這樣傳,刷新頁(yè)面id還在 params類似 post, 跳轉(zhuǎn)之后頁(yè)面 url后面不會(huì)拼接參數(shù) , 但是刷新頁(yè)面id 會(huì)消失 注意：如果提供了path，params會(huì)被忽略而導(dǎo)致失效。 通過(guò)官網(wǎng)我們知道路由中的name是不能重復(fù)的，而path是可以的。所以在函數(shù)式編程中，我們可以用變量來(lái)控制路徑。
58.路由守衛(wèi)路由攔截如何配置
通常在項(xiàng)目里，我們需要用戶進(jìn)行登錄，才能讓用戶查看項(xiàng)目。在后臺(tái)管理系統(tǒng)中，會(huì)根據(jù)不同的用戶權(quán)限展示不同的內(nèi)容。在用戶訪問(wèn)頁(yè)面之前，我們通過(guò)全局前置守衛(wèi)對(duì)路由進(jìn)行攔截，看看你是不是可以通過(guò)。通過(guò)的標(biāo)準(zhǔn)是否登錄，如果登錄就通過(guò)放行，沒(méi)有通過(guò)就打回。
需要注意的一點(diǎn)是，用戶沒(méi)有登錄，是需要跳轉(zhuǎn)到登錄頁(yè)面，如果在白名單里面沒(méi)有登錄頁(yè)或者沒(méi)有next()，頁(yè)面一直跳轉(zhuǎn)直到內(nèi)存溢出。
每個(gè)項(xiàng)目的驗(yàn)證是否擁有權(quán)限不一樣，權(quán)限判斷那一塊可以根據(jù)自己的實(shí)項(xiàng)目需求來(lái)進(jìn)行操作。
59.寫公用組件的時(shí)候，怎么提高可配置性
帶著開(kāi)放封閉原則的視角思考
開(kāi)放原則，是說(shuō)我們需要將有可能變動(dòng)的屬性，通過(guò)props接口的方式暴露給組件的調(diào)用者。
封閉原則，意思是我們需要將該組件的通用能力及邏輯封裝再組件內(nèi)部，讓調(diào)用者使用更加方便
組件的可配置性需要結(jié)合實(shí)際的業(yè)務(wù)需求具體分析
假設(shè)我們要封裝一個(gè)Tab選項(xiàng)卡組件，實(shí)際功能交互可參考組件 | Element
組件的開(kāi)放原則實(shí)踐
上面的表格為Tab組件提供的props配置接口，它們需要遵循如下特點(diǎn)，可以極大提高可配置性:
配置項(xiàng)要盡可能多的，覆蓋到業(yè)務(wù)中可能出現(xiàn)的每一種情況。
保證組件在每一項(xiàng)配置缺省狀態(tài)下都能夠正常表現(xiàn)
每一項(xiàng)配置都應(yīng)該具備合理的默認(rèn)值。
組件的封閉原則實(shí)踐
上面的表格為Tab組件所提供的自定義事件，但是事件相關(guān)的邏輯實(shí)現(xiàn)，已經(jīng)完全在組件內(nèi)部封裝好了，組件使用者，只需要按需綁定事件即可對(duì)組件的行為做出監(jiān)聽(tīng)，這些事件也需要遵循如下特點(diǎn)，才能保證該組件的可配置性：
事件函數(shù)相關(guān)邏輯，必須在組件內(nèi)部封裝完善
自定義事件函數(shù)在觸發(fā)時(shí)，必須能夠返回相關(guān)的參數(shù)
例如 @tab-click 事件會(huì)給函數(shù)返回，被點(diǎn)擊菜單的index下標(biāo)等信息
事件函數(shù)本身也需要能夠在缺省狀態(tài)下，保持組件的正常運(yùn)行。
60.vue-router怎么生成動(dòng)態(tài)地址
動(dòng)態(tài)路由配置的應(yīng)用場(chǎng)景
一般我們?cè)谑褂胿ue-router進(jìn)行路由管理的時(shí)候，是通過(guò)如下方式配置
路由與組件之間的映射關(guān)系:
角色權(quán)限的用戶，訪問(wèn)不同的菜單及路由，如上述代碼所示，部分路由只有管理員才能訪問(wèn)，而另外一部分路由只能vip用戶才能訪問(wèn)，所以需要用到vue-router提供的addRoute方法來(lái)動(dòng)態(tài)管理這一部分路由配置。本地只配置通用路由
3.后端為每個(gè)用戶分配一個(gè)角色，隨登錄接口下發(fā)給前端
router.beforeEach 路由守衛(wèi)
我們可以使用這個(gè)方法，按需攔截用戶訪問(wèn)某些敏感路由，例如:
3.router.go、router.back、router.forward 路由的進(jìn)入與返回
router.go 作用等同于
window.history.go
4.router.addRoute 動(dòng)態(tài)設(shè)置路由映射
添加一條新路由規(guī)則。如果該路由規(guī)則有 name，并且已經(jīng)存在一個(gè)與之相同的名字，則會(huì)覆蓋它。
62.談?wù)剬?duì)MVVM的理解
什么是MVVM
不管是MVC，MVP，或者M(jìn)VVM，都是常見(jiàn)的軟件架構(gòu)設(shè)計(jì)模式（Architectural Pattern），它通過(guò)分離關(guān)注點(diǎn)來(lái)改進(jìn)代碼的組織方式。不同于設(shè)計(jì)模式（Design Pattern），只是為了解決一類問(wèn)題而總結(jié)出的抽象方法，一種架構(gòu)模式往往使用了多種設(shè)計(jì)模式。MVVM，可以拆分為Model-View-ViewModel來(lái)理解：
Model - ?數(shù)據(jù)模型，可以對(duì)應(yīng)到真實(shí)開(kāi)發(fā)過(guò)程中的
數(shù)據(jù)包View - ? 視圖層，布局和外觀，可以對(duì)應(yīng)到真實(shí)開(kāi)發(fā)中的
DOM結(jié)構(gòu)ViewModel - 扮演“View”和“Model”之間的使者，幫忙處理 View 視圖層的全部業(yè)務(wù)邏輯
為什么使用MVVM框架
要回答這個(gè)問(wèn)題，我們需要對(duì)比一下，在使用MVVM框架之前，我們是如何完成前端交互的。
為了修改某個(gè)視圖節(jié)點(diǎn)中的內(nèi)容信息，我們需要頻繁人為操作DOM，效率低下
使用前
為了修改某個(gè)視圖節(jié)點(diǎn)中的內(nèi)容信息，我們需要頻繁人為操作DOM，效率低下
使用后
當(dāng)name數(shù)據(jù)發(fā)生變化的時(shí)候，視圖區(qū)域的name自定觸發(fā)更新，極大提高開(kāi)發(fā)效率
3.通過(guò)上述案例進(jìn)一步理解MVVM
name數(shù)據(jù)包可以認(rèn)為就是那個(gè)Model
div ?節(jié)點(diǎn)可以認(rèn)為就是那個(gè)View
而Vue提供的語(yǔ)法環(huán)境所支持的數(shù)據(jù)驅(qū)動(dòng)能力，就可以認(rèn)為是那個(gè)ViewModel
63.vue-router有什么組件
router-link 組件
<router-link>組件支持用戶在具有路由功能的應(yīng)用中 (點(diǎn)擊) 導(dǎo)航。通過(guò)to屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的<a>標(biāo)簽，可以通過(guò)配置tag屬性生成別的標(biāo)簽.。另外，當(dāng)目標(biāo)路由成功激活時(shí)，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名。<router-link>比起寫死的<a href="...">會(huì)好一些，理由如下：無(wú)論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級(jí)使用 hash 模式，無(wú)須作任何變動(dòng)。
在 HTML5 history 模式下，
router-link會(huì)守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁(yè)面。當(dāng)你在 HTML5 history 模式下使用
base選項(xiàng)之后，所有的to屬性都不需要寫 (基路徑) 了。router-view組件
<router-view>組件是一個(gè) functional 組件，渲染路徑匹配到的視圖組件。<router-view>渲染的組件還可以內(nèi)嵌自己的<router-view>，根據(jù)嵌套路徑，渲染嵌套組件。其他屬性 (非 router-view 使用的屬性) 都直接傳給渲染的組件， 很多時(shí)候，每個(gè)路由的數(shù)據(jù)都是包含在路由參數(shù)中。
因?yàn)樗彩莻€(gè)組件，所以可以配合
<transition>和<keep-alive>使用。如果兩個(gè)結(jié)合一起用，要確保在內(nèi)層使用<keep-alive>：
64.vue-cli怎么自定義組件
1.組件封裝
2.局部注冊(cè)調(diào)用組件
全局注冊(cè)使用
先在main.js中全局注冊(cè)該組件
然后在需要使用公共組件的業(yè)務(wù)組件中，調(diào)用該組件
65.談?wù)剬?duì)vue-loader的理解，實(shí)現(xiàn)原理是什么
一. vue-loader的作用是什么
首先我們需要達(dá)成共識(shí)的是，目前瀏覽器，只能識(shí)別普通的html、css、javascript。
但是為了能夠方便使用vue的組件化開(kāi)發(fā)，需要我們將代碼寫在.vue單文件組件中。
.vue文件，以及其內(nèi)部的template、style、script區(qū)域代碼，不能直接交給瀏覽器去解析，因?yàn)樗馕霾涣恕?/p>
所以我們需要一個(gè)vue-loader進(jìn)行.vue單文件組件代碼的轉(zhuǎn)換，也就是
.vue方便開(kāi)發(fā) ?------> ?vue-laoder協(xié)助翻譯 ?-----> ?瀏覽器才能展示
二. vue-loader 工作原理
vue-loader 的工作流程， 簡(jiǎn)單來(lái)說(shuō)，分為以下幾個(gè)步驟:
將一個(gè) .vue 文件 切割成 template、script、styles 三個(gè)部分。
template 部分 通過(guò) compile 生成 render、 staticRenderFns。
獲取 script 部分 返回的配置項(xiàng)對(duì)象 scriptExports。
styles 部分，會(huì)通過(guò) css-loader、vue-style-loader， 添加到 head 中， 或者通過(guò) css-loader、MiniCssExtractPlugin 提取到一個(gè) 公共的css文件 中。
使用 vue-loader 提供的 normalizeComponent 方法， 合并 scriptExports、render、staticRenderFns， 返回 構(gòu)建vue組件需要的配置項(xiàng)對(duì)象 - options， 即 {data, props, methods, render, staticRenderFns...}。
66.vue的路由有哪些鉤子函數(shù)，可以用來(lái)做什么
一、全局守衛(wèi)
顧名思義，是要定義在全局的，也就是我們 index.js 中的 router 對(duì)象。
1. beforeEach
全局前置守衛(wèi)，在路由跳轉(zhuǎn)前觸發(fā)，它在 每次導(dǎo)航 時(shí)都會(huì)觸發(fā)。
通過(guò) router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)。
參數(shù)
beforeEach 全局前置守衛(wèi)接收三個(gè)參數(shù)
to: Route: 即將要進(jìn)入的目標(biāo)路由對(duì)象
from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由對(duì)象
next: Function: 一定要調(diào)用該方法不然會(huì)阻塞路由。
注意： next 參數(shù)可以不添加，但是一旦添加，則必須調(diào)用一次，否則路由跳轉(zhuǎn)等會(huì)停止。
next（）方法的幾種情況
next(): 進(jìn)行管道中的下一個(gè)鉤子。
next(false): 中斷當(dāng)前的導(dǎo)航?；氐?
from路由對(duì)應(yīng)的地址。next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址，可傳遞的參數(shù)與
router.push中選項(xiàng)一致。next(error): 導(dǎo)航終止，且該錯(cuò)誤會(huì)被傳遞給
router.onError()注冊(cè)過(guò)的回調(diào)。、
2. beforeResolve
全局解析守衛(wèi)，在路由跳轉(zhuǎn)前，所有 組件內(nèi)守衛(wèi) 和 異步路由組件 被解析之后觸發(fā)，它同樣在 每次導(dǎo)航 時(shí)都會(huì)觸發(fā)。
通過(guò) router.beforeResolve 注冊(cè)一個(gè)全局解析守衛(wèi)。
回調(diào)參數(shù)，返回值和 beforeEach 一樣。也可以定義多個(gè)全局解析守衛(wèi)。
3. afterEach
全局后置鉤子，它發(fā)生在路由跳轉(zhuǎn)完成后，beforeEach 和 beforeResolve 之后，beforeRouteEnter（組件內(nèi)守衛(wèi)）之前。它同樣在 每次導(dǎo)航 時(shí)都會(huì)觸發(fā)。
通過(guò) router.afterEach 注冊(cè)一個(gè)全局后置鉤子。
這個(gè)鉤子的兩個(gè)參數(shù)和 beforeEach 中的 to 和 from 一樣。然而和其它全局鉤子不同的是，這些鉤子不會(huì)接受 next 函數(shù)，也不會(huì)改變導(dǎo)航本身。
二、路由守衛(wèi)
顧名思義，就是跟路由相關(guān)的鉤子，我們的路由守衛(wèi)只有一個(gè)，就是 beforeEnter。
1. beforeEnter
需要在路由配置上定義 beforeEnter 守衛(wèi)，此守衛(wèi)只在進(jìn)入路由時(shí)觸發(fā)，在 beforeEach 之后緊隨執(zhí)行，不會(huì)在 params、query 或 hash 改變時(shí)觸發(fā)。
beforeEnter 路由守衛(wèi)的參數(shù)是 to、from、next ，同 beforeEach 一樣。
三、組件守衛(wèi)
顧名思義，是定義在路由組件內(nèi)部的守衛(wèi)。
1. beforeRouteEnter
路由進(jìn)入組件之前調(diào)用，該鉤子在全局守衛(wèi) beforeEach 和路由守衛(wèi) beforeEnter 之后，全局 beforeResolve 和全局 afterEach 之前調(diào)用。
參數(shù)包括 to，from，next。
該守衛(wèi)內(nèi)訪問(wèn)不到組件的實(shí)例，也就是 this 為 undefined，也就是他在 beforeCreate 生命周期前觸發(fā)。
2. beforeRouteUpdate
對(duì)于 beforeRouteUpdate 來(lái)說(shuō)，this 已經(jīng)可用了，所以給 next 傳遞回調(diào)就沒(méi)有必要了。
3. beforeRouteLeave
對(duì)于 beforeRouteLeave 來(lái)說(shuō)，this 已經(jīng)可用了，所以給 next 傳遞回調(diào)就沒(méi)有必要了。
四、總結(jié)
完整的導(dǎo)航解析流程
導(dǎo)航被觸發(fā)。
在失活的組件里調(diào)用
beforeRouteLeave守衛(wèi)。調(diào)用全局的
beforeEach守衛(wèi)。在重用的組件里調(diào)用
beforeRouteUpdate守衛(wèi)。在路由配置里調(diào)用
beforeEnter。解析異步路由組件。
在被激活的組件里調(diào)用
beforeRouteEnter。調(diào)用全局的
beforeResolve守衛(wèi)。導(dǎo)航被確認(rèn)。
調(diào)用全局的
afterEach鉤子。觸發(fā)
DOM更新。調(diào)用
beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)，創(chuàng)建好的組件實(shí)例會(huì)作為回調(diào)函數(shù)的參數(shù)傳入。
67.計(jì)算屬性通常用來(lái)干什么
一、理解計(jì)算屬性的概念
計(jì)算屬性的英文是computed，其實(shí)很多時(shí)候，一些概念從英文對(duì)照為中文后，會(huì)導(dǎo)致其中一些含義發(fā)生錯(cuò)位與丟失，我們要想更好的理解computed計(jì)算屬性，可以將這個(gè)概念分為兩部分來(lái)看：
計(jì)算 ? ?
這里的計(jì)算，是有種宏觀的概念，指的是對(duì)于數(shù)據(jù)包的一種操作，比如:篩選、過(guò)濾、新增、刪除等。
說(shuō)明computed本身是具有處理數(shù)據(jù)的能力。
屬性
屬性的意思是，一種可以讀取、渲染的數(shù)據(jù)，性質(zhì)跟data的作用相似
說(shuō)明computed最終會(huì)給出一個(gè)數(shù)據(jù)供頁(yè)面渲染使用。
由此，我們可以得出一個(gè)結(jié)論:
computed計(jì)算屬性，負(fù)責(zé)將一些數(shù)據(jù)在其內(nèi)部按照指定邏輯處理后，最終給出處理后的結(jié)果數(shù)據(jù)，給到組件、頁(yè)面進(jìn)行渲染使用，可以讓開(kāi)發(fā)者更加便捷的處理一些動(dòng)態(tài)變化的數(shù)據(jù)需求。
二、computed計(jì)算屬性的特點(diǎn)
computed內(nèi)部對(duì)data做出處理，其處理結(jié)果可以像data一樣，可以直接在頁(yè)面中渲染。
computed內(nèi)部邏輯會(huì)
自動(dòng)識(shí)別到data的變化，從而做出新的操作，得出新的數(shù)據(jù)，從而自動(dòng)更新視圖。computed處理的數(shù)據(jù)具有
緩存的能力，如果data不變，則頁(yè)面中調(diào)用的都是computed第一次執(zhí)行時(shí)的運(yùn)算結(jié)果，提高渲染性能。
三、computed應(yīng)用場(chǎng)景
當(dāng)某個(gè)前端已經(jīng)指定的data數(shù)據(jù)包，如果我們渲染前，對(duì)其有過(guò)濾、篩選等操作需求，就可以使用computed
字符串翻轉(zhuǎn)的官方案例，就是將一個(gè)普通字符串翻轉(zhuǎn)后再渲染到視圖。
2.如果一個(gè)班級(jí)中有很多學(xué)生，每個(gè)學(xué)生通過(guò)一個(gè)對(duì)象來(lái)表達(dá)，現(xiàn)在我們需要根據(jù)學(xué)員成績(jī)來(lái)進(jìn)行動(dòng)態(tài)切換顯示：全部學(xué)員、及格學(xué)員、不及格學(xué)員，這種在本地進(jìn)行篩選的需求可以快速通過(guò)computed實(shí)現(xiàn)，代碼邏輯大致如下:
68.computed和watch的區(qū)別
上一個(gè)問(wèn)題我們已經(jīng)詳細(xì)探討了computed的相關(guān)特征，在這里我們可以逐一對(duì)比一下:
兩者都跟data有關(guān)，區(qū)別在于
computed ? 在處理完data后，會(huì)提供一個(gè)新的數(shù)據(jù)包以供使用
watch ? 只會(huì)監(jiān)聽(tīng)某個(gè)指定data的變化，執(zhí)行相關(guān)的邏輯，不會(huì)提供新的數(shù)據(jù)
兩者的使用傾向不同
computed ? 內(nèi)部雖然有邏輯，但是使用時(shí)更加多的關(guān)心其提供的
新數(shù)據(jù)包watch ? ? 更加關(guān)注data數(shù)據(jù)變化所引發(fā)的
行為邏輯
69.狀態(tài)管理器的數(shù)據(jù)走向是什么
一、什么是狀態(tài)管理？
狀態(tài)管理就是，把組件之間需要共享的狀態(tài)抽取出來(lái)，遵循特定的約定，統(tǒng)一來(lái)管理，讓狀態(tài)的變化可以預(yù)測(cè)。
二、為什么需要狀態(tài)管理？
狀態(tài)共享
組件之間通常會(huì)有一些共享的狀態(tài)，在 Vue 或者 React 中我們一般會(huì)將這部分狀態(tài)提升至公共父組件的 props 中，由父組件來(lái)統(tǒng)一管理共享的狀態(tài)，狀態(tài)的改變也是由父組件執(zhí)行并向下傳遞。這樣會(huì)導(dǎo)致兩個(gè)問(wèn)題:
需要將共享的狀態(tài)提升至公共的父組件，若無(wú)公共的父組件，往往需要自行構(gòu)造
狀態(tài)由父組件自上而下逐層傳遞，若組件層級(jí)過(guò)多，數(shù)據(jù)傳遞會(huì)變得很冗雜
變化跟蹤
在應(yīng)用調(diào)試過(guò)程中，可能會(huì)有跟蹤狀態(tài)變化過(guò)程的需求，方便對(duì)某些應(yīng)用場(chǎng)景的復(fù)現(xiàn)和回溯。這時(shí)候就需要統(tǒng)一對(duì)狀態(tài)進(jìn)行管理，并遵循特定的約定去變更狀態(tài)，從而讓狀態(tài)的變化可預(yù)測(cè)。
三、單項(xiàng)數(shù)據(jù)流
因?yàn)樵谡鎸?shí)項(xiàng)目開(kāi)發(fā)過(guò)程中，Store狀態(tài)管理器中的數(shù)據(jù)會(huì)在很多組件中用到，如果不設(shè)定一個(gè)統(tǒng)一的規(guī)范去管理數(shù)據(jù)，最終將會(huì)導(dǎo)致數(shù)據(jù)混亂、使得項(xiàng)目變得難以維護(hù)。所以vuex狀態(tài)管理器設(shè)計(jì)了如下幾個(gè)核心api，與視圖之間進(jìn)行交互配合:
state ? ?
vuex提供的，用以集中存儲(chǔ)共享的數(shù)據(jù)。
mutations
vuex提供的，專門用以觸發(fā)state數(shù)據(jù)變化的方法集，并且要求mutations的方法執(zhí)行結(jié)果必須時(shí)可預(yù)測(cè)的，在其內(nèi)部不能出現(xiàn)異步請(qǐng)求等不可預(yù)測(cè)的邏輯。
actions ?
vuex提供的，專門用于讓vuex進(jìn)行異步請(qǐng)求處理的方法集，可選擇使用。
view ? ?
視圖層，整個(gè)項(xiàng)目組件的代稱，我們?cè)诖颂幭M(fèi)狀態(tài)管理器提供的數(shù)據(jù)、方法。
數(shù)據(jù)走向必須遵循單向數(shù)據(jù)流的規(guī)范:
當(dāng)我們初始化使用狀態(tài)機(jī)數(shù)據(jù)時(shí)的流程是
store---->state----> view
當(dāng)組件內(nèi)部想要本地更新?tīng)顟B(tài)管理器的數(shù)據(jù)，其流程是
view觸發(fā)---->mutations---->state---->store---->view更新
當(dāng)組件內(nèi)部想要在異步請(qǐng)求后，再更新本地狀態(tài)管理器的數(shù)據(jù)，其流程是
view觸發(fā)---->actions---->mutations---->state---->store---->view更新
70.vuex數(shù)據(jù)丟失怎么解決
vuex的 store 中的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁(yè)面刷新時(shí)，頁(yè)面會(huì)重新加載 vue 實(shí)例，vuex 里面的數(shù)據(jù)就會(huì)被重新賦值，這樣就會(huì)出現(xiàn)頁(yè)面刷新vuex中的數(shù)據(jù)丟失的問(wèn)題。 如何解決瀏覽器刷新數(shù)據(jù)丟失問(wèn)題呢？
方法一：手動(dòng)操作本地存儲(chǔ)
全局監(jiān)聽(tīng)，頁(yè)面刷新的時(shí)候?qū)?store 里 state 的值存到 sessionStorage 中，然后從sessionStorage 中獲取，再賦值給 store ，并移除 sessionStorage 中的數(shù)據(jù)。在 app.vue 中添加以下代碼：
方法二：安裝 vuex-persistedstate 插件
這時(shí)候就需要使用 sessionStorage 進(jìn)行存儲(chǔ)，修改 plugins 中的代碼
71.怎么理解v-for的key值
key的值一般為string或則number的類型，它用于解決在進(jìn)行虛擬dom更新時(shí)的更新對(duì)象快速定位，虛擬dom更新需要逐個(gè)對(duì)比虛擬dom對(duì)象綁定的數(shù)據(jù)，這個(gè)過(guò)程稱為diff算法，所以key也是提升diff算法的一個(gè)標(biāo)識(shí)符，因?yàn)閿?shù)組可能會(huì)進(jìn)行排序以及增刪等動(dòng)作，所以使用數(shù)組的下標(biāo)來(lái)定義key是沒(méi)有任何作用的
72.能不能自己實(shí)現(xiàn)v-model的功能
可以的，自定義一個(gè)指令，給節(jié)點(diǎn)綁定上添加input的功能，數(shù)據(jù)使用value綁定，在用戶輸入數(shù)據(jù)的時(shí)候，采用oninput事件來(lái)進(jìn)行數(shù)據(jù)獲取，并實(shí)時(shí)更新value數(shù)據(jù)，即可實(shí)現(xiàn)v-model的功能
73.Vue雙向數(shù)據(jù)綁定，怎么知道數(shù)據(jù)變了
在Vue2.x中采用ES5的對(duì)象屬性定義方法(Object.defineProperty)來(lái)給每一個(gè)數(shù)據(jù)添加額外屬性(getter和setter屬性)進(jìn)行數(shù)據(jù)攔截，在vue內(nèi)部實(shí)現(xiàn)對(duì)攔截?cái)?shù)據(jù)的setter方法數(shù)據(jù)更新消息發(fā)布機(jī)制來(lái)獲取數(shù)據(jù)更新消息，對(duì)getter方法實(shí)現(xiàn)消息訂閱機(jī)制來(lái)獲取數(shù)據(jù)更新
74.退出登錄頭像還在是什么原因怎么辦
多方面的原因引起的：
1、頭像信息是否采用了應(yīng)用緩存機(jī)制，如果有需要清除H5應(yīng)用緩存
2、頭像緩存在webStorage中，退出沒(méi)有清除，直接清除
3、緩存在移動(dòng)設(shè)備的數(shù)據(jù)，也需要清除
4、緩存在vuex或redux中的數(shù)據(jù)，直接清除即可
5、瀏覽器緩存，清除cookie或則強(qiáng)制清除瀏覽器緩存
75.vue數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)，如果不用vue，用原生js代碼怎么實(shí)現(xiàn)
1、獲取傳遞進(jìn)來(lái)的數(shù)據(jù)，然后對(duì)所有數(shù)據(jù)添加getter和setter方法，并在setter方法中添加消息訂閱回調(diào)方法，在getter方法中實(shí)現(xiàn)數(shù)據(jù)更新發(fā)布回調(diào)方法
2、對(duì)作用域內(nèi)的所有dom節(jié)點(diǎn)進(jìn)行數(shù)據(jù)以來(lái)處理，根據(jù)不同指令來(lái)實(shí)現(xiàn)不同訂閱或發(fā)布回調(diào)方法綁定：如v-model綁定的數(shù)據(jù)對(duì)象，在oninput事件中添加消息發(fā)布回調(diào)方法綁定，在v-text中添加value數(shù)據(jù)更新消息訂閱回調(diào)方法綁定
當(dāng)在輸入框輸入值的時(shí)候，出發(fā)oninput事件，出發(fā)消息發(fā)布回調(diào)方法更新數(shù)據(jù)
當(dāng)數(shù)據(jù)發(fā)生變化，觸發(fā)訂閱方法，執(zhí)行dom數(shù)據(jù)更新方法，把最新數(shù)據(jù)更新到視圖上
76.vue如何實(shí)現(xiàn)響應(yīng)式，說(shuō)一下原理，它有什么缺點(diǎn)？
它使用ES5的Object.defineProperty方法把所有的屬性全部改為setter和getter屬性，在每一個(gè)組件中都有一個(gè)watcher對(duì)象，當(dāng)數(shù)據(jù)被賦值或變更的時(shí)候會(huì)通知頁(yè)面的render方法對(duì)數(shù)據(jù)進(jìn)行重新渲染，達(dá)到數(shù)據(jù)和視圖的響應(yīng)更新
因?yàn)閖s的固有特性，不能動(dòng)態(tài)觀察對(duì)象動(dòng)態(tài)添加、刪除屬性和數(shù)組的長(zhǎng)度添加，所以vue2.x不能夠動(dòng)態(tài)進(jìn)行數(shù)據(jù)雙向綁定，需要調(diào)用$set、$delete這些方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)添加雙向綁定屬性
77.include，exclude的區(qū)別
這個(gè)是webpack中常常用于指定加載，對(duì)哪些文件進(jìn)行加載的排除或包含的一個(gè)屬性，include配置的文件路徑中的所有文件都將采用配置的loader進(jìn)行文件加載處理，exclude是配置的路徑都不要進(jìn)行這個(gè)加載器的處理
78.你說(shuō)你使用懶加載優(yōu)化頁(yè)面，用的哪個(gè)版本的vue,看過(guò)源碼嗎, vue2.0不能實(shí)現(xiàn)懶加載
這個(gè)與vue沒(méi)有太大關(guān)系，采用的是ES6的動(dòng)態(tài)加載機(jī)制來(lái)實(shí)現(xiàn)頁(yè)面的懶加載，主要使用的webpack語(yǔ)法庫(kù)為：@babel/plugin-syntax-dynamic-import，在對(duì)頁(yè)面引入的時(shí)候，需要把引入方式從：import MyComponent from 'path' 修改為：const MyComponent = () => import('path')
79.運(yùn)用多個(gè)組件庫(kù),提取公共代碼進(jìn)行壓縮,發(fā)現(xiàn)js代碼過(guò)大，怎么處理
對(duì)組件不要做全局引入，可以采用動(dòng)態(tài)引入和頁(yè)面局部引入機(jī)制，減少文件首次加載的文件大小和文件進(jìn)行打包時(shí)把所有依賴進(jìn)行一次性打包造成的文件過(guò)大問(wèn)題
80.vue中爺孫通信怎么實(shí)現(xiàn)
可以采用：eventBus事件機(jī)制來(lái)進(jìn)行數(shù)據(jù)傳遞；也可以采用逐層props和$emit事件傳遞來(lái)實(shí)現(xiàn)傳值；vuex數(shù)據(jù)傳遞；使用v-model逐層數(shù)據(jù)傳遞等
81.vue怎么配置多個(gè)代理
82.為什么vue3.0雙向數(shù)據(jù)綁定換成了proxy
因?yàn)镺bject.defineProperty方法的歷史原因，如果要實(shí)現(xiàn)數(shù)據(jù)的劫持，需要遍歷所有屬性，如果是深層數(shù)據(jù)需要遞歸來(lái)進(jìn)行屬性綁定；而proxy是直接代理此數(shù)據(jù)對(duì)象，不需要遍歷綁定屬性
如果對(duì)象有數(shù)據(jù)屬性添加或則屬性更新，需要重新給定數(shù)據(jù)劫持方法綁定，而proxy直接代理對(duì)象，不需要對(duì)屬性做另外的處理
因此可以在進(jìn)行數(shù)據(jù)監(jiān)聽(tīng)和劫持上節(jié)省很多數(shù)據(jù)遍歷性能
83.你封裝一個(gè)組件會(huì)有哪些考慮，用戶用你的組件要怎么用？如果用戶在使用你組件的同時(shí)又想自己加一些按鈕進(jìn)去那么此時(shí)你的組件要怎么寫？
回答：
1、封裝組件會(huì)有哪些考慮，用戶用你的組件要怎么用？
1）、封裝組件和封裝函數(shù)是同樣的道理，需要考慮到組件的通用性。
2）、那么，組件的屬性，組件事件，組件的內(nèi)容都是需要考慮到的。
組件的屬性：需要考慮到屬性的類型限制，屬性的默認(rèn)值
組件的事件：組件事件對(duì)應(yīng)的函數(shù)，需要考慮到函數(shù)的參數(shù)和返回值
組件的內(nèi)容：要充分考慮到組件的通用性，靈活性。組件的內(nèi)容給予使用者以更大的靈活空間。
2、如果用戶在使用你組件的同時(shí)又想自己加一些按鈕進(jìn)去那么此時(shí)你的組件要怎么寫？
1）、要么使用內(nèi)容的方式（vue中是插槽）
2）、要么提供一個(gè)render函數(shù)，由用戶提供需要渲染的內(nèi)容（如：按鈕）。同時(shí)，根據(jù)自定義組件的情況，可以考慮讓用戶把按鈕渲染在指定的區(qū)域。即：render函數(shù)里有：渲染的區(qū)域和渲染的內(nèi)容。
84.vue圖片懶加載：①不考慮兼容性做法（你認(rèn)為最好處理最效率的）②考慮兼容性做法
回答：
? 1、場(chǎng)景：
? 一個(gè)網(wǎng)頁(yè)如果包含了很多的圖片，那么，服務(wù)器壓力就會(huì)很大。不僅影響渲染速度還會(huì)浪費(fèi)帶寬。
? 通俗的說(shuō)：你不看的圖片我先不加載，也許你不看呢（哈哈），我何苦要做無(wú)效的事情呢 ? ? ? ? ? ? ? ? ? ? ?你想看時(shí)，我再加載（哈哈）
? 2、原理：
? ? 1）、先將img標(biāo)簽的src鏈接設(shè)為同一張圖片(默認(rèn)圖片：可以是loading)，把圖片的實(shí)際地址賦給一個(gè)自定義屬性。這時(shí)候所有的圖片只發(fā)送一次請(qǐng)求。
? ? 2）、然后，當(dāng)js監(jiān)聽(tīng)到某張圖片進(jìn)入可視窗口時(shí)（說(shuō)明你想看了），再將實(shí)際地址賦給src屬性。src屬性的值發(fā)生變化時(shí)，瀏覽器才會(huì)發(fā)送請(qǐng)求加載當(dāng)前圖片。如果圖片沒(méi)有進(jìn)入可視區(qū)域，就不會(huì)加載圖片（說(shuō)明你還沒(méi)想看呢），這樣就大大的提高了效率。
?3、示例代碼（兼容性在代碼中有注釋）：
85.vue組件中的data為什么必須是函數(shù)，為什么不可以是對(duì)象，數(shù)組這些
回答：
1、如果vue組件的data是一個(gè)對(duì)象，那么在復(fù)用vue組件時(shí)，由于對(duì)象是個(gè)引用類型。那么，每個(gè)組件的data會(huì)指向同一塊內(nèi)存空間，組件之間的data就會(huì)互相影響。所以，組件中的data不能是對(duì)象。
2、vue框架中把data定義成函數(shù)，函數(shù)里返回真正的數(shù)據(jù)（引用類型）。每次復(fù)用組件時(shí)，vue框架都會(huì)調(diào)用該函數(shù)。當(dāng)調(diào)用該函數(shù)時(shí)，函數(shù)返回新的對(duì)象（申請(qǐng)新的空間）。那么不同的組件的內(nèi)存空間就是獨(dú)立的，不會(huì)互相影響。 ? ? ?
-?End -
