轉(zhuǎn)載自程序員是粉色的

1、對(duì)mvvm模式的理解鱼炒？
mvvm是model view viewModel的縮寫 model 是數(shù)據(jù)模型 定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯 view是ui組件 將數(shù)據(jù)模型轉(zhuǎn)換成Ui展現(xiàn)出來(lái) viewModel監(jiān)聽(tīng)模型數(shù)據(jù)的改變 控制視圖行為 處理用戶交互 通過(guò)雙向數(shù)據(jù)綁定將view和model連接起來(lái) view和model之間的同步是自動(dòng)的 無(wú)需人為干涉 所以開發(fā)者只需要關(guān)注業(yè)務(wù)邏輯而不需要操作dom 更無(wú)須關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題 復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)就交給mvvm統(tǒng)一管理锰什。

2、vue生命周期？
vue實(shí)例從創(chuàng)建到銷毀的過(guò)程海渊，就是生命周期。 也就是從開始創(chuàng)建哲鸳、初始化數(shù)據(jù)臣疑，編譯模板、掛載DOM —渲染徙菠、更新—渲染讯沈、卸載等一系列過(guò)程，稱為Vue的生命周期 分為 8個(gè)階段 創(chuàng)建前后 載入前后 更新前后 銷毀前后婿奔。
BeforeCreate 組件實(shí)例剛剛被創(chuàng)建缺狠，獲取不到props或者data中的數(shù)據(jù)，這些數(shù)據(jù)初始化都在initState中萍摊。
Created 實(shí)例已經(jīng)被創(chuàng)建完成之后調(diào)用挤茄，可以訪問(wèn)到之前不能訪問(wèn)到的數(shù)據(jù)，但是組件還沒(méi)有被掛載冰木。
BeforeMount 掛載開始之前被調(diào)用穷劈。
Mounted dom節(jié)點(diǎn)被渲染到文檔內(nèi)笼恰，一些需要dom的操作在此時(shí)才能正常進(jìn)行。
BeforeUpdate 數(shù)據(jù)更新時(shí)調(diào)用歇终，發(fā)生在虛擬dom重新渲染之前 在這個(gè)鉤子中進(jìn)一步地更改狀態(tài) 不會(huì)觸發(fā)附加的重渲染過(guò)程
Update 組件DOM已經(jīng)更新社证，可以執(zhí)行依賴于DOM的操作，但應(yīng)該避免在此期間更改狀態(tài) 有可能會(huì)導(dǎo)致更新無(wú)限循環(huán)练湿。
BeforeDestory 實(shí)例銷毀之前調(diào)用猴仑，實(shí)例仍然可以調(diào)用。
Destroyed 實(shí)例被銷毀后調(diào)用 調(diào)用后vue實(shí)例指示的所有東西都會(huì)解綁肥哎，事件監(jiān)聽(tīng)器會(huì)被移除辽俗，所有子實(shí)例也會(huì)被銷毀，該鉤子在服務(wù)器端渲染期間不被調(diào)用篡诽。

3崖飘、Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理？
vue數(shù)據(jù)雙向綁定是通過(guò)數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的杈女，通過(guò)劫持object.defineProperty()中的set和get屬性朱浴。

4、Vue組件間傳遞參數(shù)达椰？
父組件給子組件：父組件通過(guò)子標(biāo)簽綁定的屬性翰蠢，子組件通過(guò)props接收
子組件給父組件：子組件通過(guò)[圖片上傳失敗...(image-248011-1619348095634)]

parent.[圖片上傳失敗...(image-d861fc-1619348095634)]

children中可以通過(guò)組件name查詢到需要的組件實(shí)例，然后傳值

5啰劲、React和Vue的區(qū)別梁沧？
相同：都支持服務(wù)器端渲染，組件化開發(fā)通過(guò)props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞蝇裤，數(shù)據(jù)驅(qū)動(dòng)視圖廷支，
不同：vue是雙向數(shù)據(jù)綁定，react數(shù)據(jù)流動(dòng)是單向的栓辜。Vue渲染過(guò)程是跟蹤每一個(gè)組件的依賴恋拍，更改了哪個(gè)組件渲染哪個(gè)，react重新渲染全部組件

6藕甩、對(duì)keep-alive的了解施敢？
是Vue的內(nèi)置組件，可以使被包含的組件保留狀態(tài)狭莱，避免重新渲染
擁有兩個(gè)獨(dú)有的生命周期鉤子函數(shù)悯姊，activated和deactivated
被包裹在keep-alive中的組件的狀態(tài)將會(huì)被保留，例如我們將某個(gè)列表類組件內(nèi)容滑動(dòng)到第100條位置贩毕，那么我們?cè)谇袚Q到一個(gè)組件后再次切換回到該組件，該組件的位置狀態(tài)依舊會(huì)保持在第100條列表處

7.<keep-alive></keep-alive>的作用是什么?
<keep-alive></keep-alive> 包裹動(dòng)態(tài)組件時(shí)仆嗦，會(huì)緩存不活動(dòng)的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染辉阶。
大白話: 比如有一個(gè)列表和一個(gè)詳情，那么用戶就會(huì)經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁(yè)面，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存谆甜，這樣用戶每次返回列表的時(shí)候垃僚，都能從緩存中快速渲染，而不是重新渲染

8规辱、route和router的區(qū)別谆棺？
route是路由信息對(duì)象，包括path params query name等路由信息參數(shù)
router是路由實(shí)例對(duì)象罕袋，包括了路由的跳轉(zhuǎn)方法改淑，鉤子函數(shù)等
query和params的區(qū)別：query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候可以在地址欄看到請(qǐng)求參數(shù)浴讯，用path來(lái)引入朵夏；params相當(dāng)于post，地址欄不顯示參數(shù) 用name來(lái)引入
路由的鉤子函數(shù)：beforEach
to:即將要進(jìn)入的目標(biāo) 包括的屬性（path params query name meta matched fullPath）

9榆纽、vue常用的修飾符仰猖？
.prevent 阻止元素默認(rèn)跳轉(zhuǎn) .stop 阻止單擊事件冒泡 .capture捕獲 .once 只執(zhí)行一次

10、怎么定義vue-router的動(dòng)態(tài)路由以及如何獲取傳過(guò)來(lái)的動(dòng)態(tài)參數(shù)奈籽？
在router目錄下的index.js文件中饥侵，對(duì)path屬性加上/:id
使用router對(duì)象的params.id

11、vue+axios登錄攔截
在定義路由的時(shí)候加上requireAuth衣屏，判斷該路由的訪問(wèn)是否需要登錄 如果已經(jīng)登錄則順利進(jìn)入頁(yè)面躏升。定義完路由后利用vue-router提供的鉤子函數(shù)beforeEach()對(duì)路由進(jìn)行判斷 判斷是否需要登錄權(quán)限，判斷是否存在token
想要統(tǒng)一處理所有http請(qǐng)求和響應(yīng)勾拉，用axios攔截器 通過(guò)配置http response inteceptor ,當(dāng)后端返回401時(shí)煮甥，則未授權(quán) 讓用戶重新登錄

12、Vuex是什么藕赞？怎么使用成肘？哪種功能場(chǎng)景使用它？
只用來(lái)讀取的狀態(tài)集中放在sotre中斧蜕，改變狀態(tài)的方式是提交mutations双霍，這是個(gè)同步事物；異步邏輯應(yīng)該封裝在action中
組件渲染之后批销，與用戶產(chǎn)生交互洒闸，觸發(fā)一些行為(dispatch ---->action)，這些行為會(huì)提交一些修改數(shù)據(jù)的行為(commit ---->mutations)均芽， 這些行為會(huì)主動(dòng)修改狀態(tài)(state)中的數(shù)據(jù)丘逸，狀態(tài)數(shù)據(jù)的改變會(huì)更新組件

13、vue路由原理
只有2種實(shí)現(xiàn)方式 hash模式和history模式
hash模式：帶#號(hào)的掀宋，當(dāng)#后面的哈希值發(fā)生變化時(shí)深纲，可以通過(guò)hashchange事件來(lái)監(jiān)聽(tīng)到URL變化仲锄，進(jìn)行頁(yè)面跳轉(zhuǎn)（簡(jiǎn)單，兼容性好）
history模式：h5新功能湃鹊，使用history.pushState和history.replaceState改變URL

14儒喊、computed和watch區(qū)別
computed是計(jì)算屬性，依賴其他屬性計(jì)算值币呵，并且computed的值有緩存怀愧，只有當(dāng)計(jì)算值變化才會(huì)返回內(nèi)容
Watch監(jiān)聽(tīng)到值的變化就會(huì)執(zhí)行回調(diào)，在回調(diào)中進(jìn)行一些邏輯操作
一般需要依賴別的屬性來(lái)動(dòng)態(tài)獲得值的時(shí)候可以使用computed
對(duì)于監(jiān)聽(tīng)到值的變化需要做一些復(fù)雜業(yè)務(wù)邏輯的情況可以使用watch

15余赢、v-if和v-show的區(qū)別
v-show 只是通過(guò)設(shè)置dom元素的display控制顯示隱藏
V-if 是動(dòng)態(tài)的添加或刪除dom元素