前端工程師必問面試題?vue路由模式?路由守衛(wèi)?

1.vue路由有幾種模式?有什么區(qū)別,以及原理?

vue的路由模式一共有兩種,分別是哈希和history,他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求當(dāng)中,并且hash不會(huì)重新加載頁(yè)面,而使用history模式的話,如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話,會(huì)報(bào)404錯(cuò)誤,所以history的原理是利用html5新增的兩個(gè)特性方法,分別是psuhState和replaceState來(lái)完成的,以上就是對(duì)vue路由的理解。

2.vue路由守衛(wèi)?

路由的導(dǎo)航守衛(wèi) 又叫做路由的鉤子函數(shù)(生命周期函數(shù))
就是在跳轉(zhuǎn)頁(yè)面的時(shí)候把路由欄下來(lái),做一些操作在放行,vue一共提供了三種路由守衛(wèi)。
第一種是全局守衛(wèi)
beforeEach路由進(jìn)入之前
afterEach路由進(jìn)入之后

第二種 組件內(nèi)守衛(wèi)
beforeRouteEnter 路由進(jìn)入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由離開之前

第三種 路由獨(dú)享守衛(wèi)
beforeEnter 路由進(jìn)入之前

回調(diào)函數(shù)里面有三個(gè)參數(shù)

分別是 to from next
next 這個(gè)參數(shù) 在路由3.x版本的時(shí)候,是必須的
但是到了路由4.x版本的時(shí)候next參數(shù)變成可選的了
一般來(lái)說vue2搭配 3.x的路由
vue3搭配 4.x 的路由

比如說購(gòu)物車頁(yè)面只有登陸的才能訪問,我們可以用組件級(jí)守衛(wèi)購(gòu)物車頁(yè)面,如果已經(jīng)登陸存有token 的話,就繼續(xù)訪問這個(gè)頁(yè)面,如果沒有登陸的話就會(huì)跳轉(zhuǎn)到登陸頁(yè)面。

理解

在項(xiàng)?中我們經(jīng)常使?路由守衛(wèi)實(shí)現(xiàn)??的鑒權(quán). ?如:當(dāng)?戶登錄之后,我們會(huì)把后臺(tái)返回的token以及?戶信息保存到vuex
和本地,當(dāng)??進(jìn)?跳轉(zhuǎn)的時(shí)候,我們會(huì)在路由守衛(wèi)??獲取vuex??的token,如果token存在的話,我們則使?next讓他進(jìn)?要
跳轉(zhuǎn)的??,如果token不存在的話我們使?next?法讓他回到登錄?
以上就是我對(duì)vue路由守衛(wèi)的理解。

3.v-if和v-show的區(qū)別?

?先v-if和v-show都是控制元素的顯示與隱藏, 不過v-if控制元素的顯
示和隱藏的時(shí)候會(huì)刪除對(duì)?的dom元素,當(dāng)每?個(gè)顯示的時(shí)候,都會(huì)重新創(chuàng)建dom和渲染. ?v-show則是通過css的display:none
和display:block來(lái)控制元素的顯示與隱藏. v-if?較耗費(fèi)性能,所以我們涉及到頻繁的顯示隱藏操作我們建議使?v-show,如果不
是頻繁操作的話,我們可以v-if
在項(xiàng)?中我會(huì)經(jīng)常使?v-if和v-show,?如我們?cè)谒阉鞴δ艿臅r(shí)候,他有?個(gè)歷史記錄,這個(gè)時(shí)候我們根據(jù)是否有搜索的結(jié)果來(lái)判
斷歷史記錄的顯示與隱藏,這塊我就可以使?v-if ,當(dāng)然?v-show也可以. 以上就是我對(duì)v-if和v-show的理解。

4.v-for與v-if的優(yōu)先級(jí)那個(gè)??如果同時(shí)使?v-for和v-if怎么解決?

v-for的優(yōu)先級(jí)?. 因?yàn)関-for的時(shí)候我們才開始渲染dom元素,這個(gè)v-if還?法進(jìn)?判斷.
v-for和v-if不能同時(shí)使?,我們可以通過標(biāo)簽,?如div或者template標(biāo)簽來(lái)進(jìn)?包裹,把v-if寫到包裹的標(biāo)簽上?(寫到v-for外?)。

5. methods、computed和watch的區(qū)別?

?先呢,methods是?來(lái)定義?法的區(qū)域,methods定義的?法需要調(diào)?才能觸發(fā). 不具備緩存?
?computed是計(jì)算屬性,他依賴于屬性值的變化,當(dāng)屬性發(fā)?改變的時(shí)候,計(jì)算屬性??定義的?法就會(huì)觸發(fā),computed具有緩
存性,依賴屬性值的變化?變化.
?watch主要是?于監(jiān)聽,不具備被緩存性.依賴于數(shù)據(jù)變化?觸發(fā).
在項(xiàng)?中,?如我們獲取state的狀態(tài)的時(shí)候我們會(huì)把它放到computed??,或者在寫購(gòu)物?數(shù)量計(jì)算的時(shí)候也會(huì)使?計(jì)算屬性.
?watch也在項(xiàng)?經(jīng)常使?,?如我們封裝編輯 和 新增彈窗組件的時(shí)候會(huì)通過watch來(lái)進(jìn)?id判斷我們要顯否要清空表單的數(shù)
據(jù).
以上就是我對(duì)computed和watch的理解。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 回答面試題的套路 1?先說這個(gè)點(diǎn)的明確定義,或者是特性; 2?再說具體的應(yīng)用場(chǎng)景; 3?說說自己的看法、觀點(diǎn); 4...
    Amanda妍閱讀 58,618評(píng)論 16 137
  • 目錄 1.vue-router是怎么傳遞參數(shù)的 2.v-if和v-for一起使用的弊端以及解決辦法 3.befor...
    裁塵的人兒閱讀 1,213評(píng)論 1 5
  • 本篇文章給大家分享一些常見的前端vue面試題,有一定的參考價(jià)值,希望對(duì)大家有所幫助。 vue面試題 vue.js的...
    歐子有話說_閱讀 11,321評(píng)論 0 57
  • .什么是vue生命周期 Vue 實(shí)例從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過...
    酷酷的凱先生閱讀 698評(píng)論 0 2
  • vue的核心是什么? Vue 的核心設(shè)計(jì)理念可以概括為以下 5 個(gè)關(guān)鍵要素,這些要素共同構(gòu)成了 Vue 的獨(dú)特優(yōu)勢(shì)...
    Aniugel閱讀 10,227評(píng)論 3 21

友情鏈接更多精彩內(nèi)容