1. v-if與v-show區(qū)別
v-if只有當條件是true才進行渲染，是真正的銷毀和重建。
v-show無論條件是否為true都會渲染墙杯，只不過是基于css display：none來進行切換蛾坯。
一般來說，v-if切換開銷比較高勾缭，而v-show有比較高的初始渲染開銷
2. router-link與a有區(qū)別嗎
router-link其實還是轉(zhuǎn)換成了a標簽進行頁面跳轉(zhuǎn)揍障。但是router-link利用了緩存機制，只渲染修改的部分俩由。所有盡量使用router-link
3. vue-loader是什么毒嫡？它的用途有哪些？
是基于webpack的一個的loader幻梯，解析和轉(zhuǎn)換 .vue 文件兜畸，提取出其中的邏輯代碼 script、樣式代碼 style碘梢、以及 HTML 模版 template咬摇，再分別把它們交給對應(yīng)的 Loader 去處理，
selector–將.vue文件解析拆分成一個parts對象煞躬，其中分別包含style肛鹏、script、template
style-compiler–解析style部分
template-compiler 解析template部分
babel-loader-- 解析script部分恩沛，并轉(zhuǎn)換為瀏覽器能識別的普通js
4. 計算屬性和watch的區(qū)別
計算屬性自動監(jiān)聽依賴值得變化在扰，從而動態(tài)返回內(nèi)容。watch是一個過程雷客，在監(jiān)聽的值改變后芒珠，可以觸發(fā)一個回調(diào)，并做一些事情搅裙。
一般來說妓局，如果只是需要動態(tài)值，用計算屬性呈宇；如果需要監(jiān)聽值的變化后執(zhí)行邏輯好爬，用watch。
另外：
計算屬性是一個對象的時候甥啄，會有g(shù)et和set兩個屬性存炮。
計算屬性跟方法相比，計算屬性會有緩存，方法沒有穆桂；計算屬性不能接受參數(shù)宫盔，方法可以。
5. watch中的deep:true 是如何實現(xiàn)的享完？為什么computed沒有deep:true
如果用戶要監(jiān)聽的是個對象灼芭，內(nèi)層的對象就不會被依賴收集，這時候有一個deep屬性般又，要想讓收集到內(nèi)層的對象彼绷，就需要將deep設(shè)置成true，這時候就會執(zhí)行traverse這個方法茴迁，這個方法里就是做了個數(shù)組遞歸寄悯，如果是數(shù)組的話，會根據(jù)數(shù)組的每一項索引取值堕义，進行遞歸追加依賴猜旬，如果是對象會拿的key進行遍歷取值，進行遞歸追加依賴倦卖，traverse就是deep：true實現(xiàn)的核心洒擦。這樣就會把數(shù)組或者對象的沒一個屬性都進行依賴追加進行監(jiān)聽，只有依賴發(fā)生變化就會通知視圖更新
因為computed是用在模板里的怕膛，在模板中的數(shù)據(jù)會調(diào)一個方法JSON.strginify()秘遏，放一個對象，默認會對這個對象里的所有屬性求值嘉竟。
6. 為何vue采用異步渲染
如果不采用異步渲染邦危，那么每次更新數(shù)據(jù)都會對當前組件進行渲染。為了性能考慮舍扰，vue會在本輪數(shù)據(jù)更新后倦蚪，異步更新視圖。（一個組件边苹，更新了很多的數(shù)據(jù)陵且，每次都要渲染，那效率就太低了）
7. 為什么組件中的 data 必須是一個函數(shù)个束，然后 return 一個對象慕购，而 new Vue 實例里，data 可以直接是一個對象茬底？
因為組件會被拿來復用沪悲。JS里的對象是引用關(guān)系，作用域沒有隔離阱表。這樣一來就會造成不同組件的data相互影響殿如。而new Vue的實例是不會被復用的贡珊，因此也不存在引用對象的問題。
8. vue中key的作用
key 的作用主要是為了更高效的更新虛擬 DOM涉馁，提高性能门岔。
舉例來說，a烤送、b寒随、c、d帮坚、e五個節(jié)點妻往，如果更新后變成了a、b叶沛、c蒲讯、z忘朝、d灰署、e。如果沒有key的話局嘁，diff算法會挨個更新元素溉箕。給節(jié)點添加key后，相當于是給節(jié)點添加了唯一標識悦昵。diff算法可以正確的識別節(jié)點肴茄，找到位置插入新的節(jié)點。
9. nextTick
作用：在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)但指。在修改數(shù)據(jù)之后立即使用這個方法寡痰，可以獲取更新后的 DOM。
應(yīng)用場景：需要在視圖更新之后棋凳，基于新的視圖進行操作拦坠。
觸發(fā)時機：在同一事件循環(huán)中的數(shù)據(jù)變化后，DOM完成更新剩岳，立即執(zhí)行Vue.nextTick()的回調(diào)贞滨。
Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate拍棕，如果執(zhí)行環(huán)境不支持晓铆，則會采用 setTimeout(fn, 0) 代替。宏任務(wù)耗費的時間是大于微任務(wù)的绰播，所以在瀏覽器支持的情況下骄噪，優(yōu)先使用微任務(wù)。如果瀏覽器不支持微任務(wù)蠢箩，使用宏任務(wù)腰池。
10. keep-alive
11. vue的雙向綁定原理
分對象和數(shù)組
對象的話尾组，利用Object.defineProperty()來重新定義屬性，當屬性發(fā)生變化時示弓，就會通知相關(guān)依賴進行更新操作讳侨。
數(shù)組的話，使用函數(shù)劫持的方法奏属，重寫了數(shù)組的方法
Vue將data中的數(shù)組進行了原型鏈重寫跨跨，指向了自己定義的數(shù)組原型方法。這樣調(diào)用數(shù)組api（7種會改變數(shù)組的方法）時囱皿，就會通知依賴更新勇婴。如果數(shù)組中包含引用類型，則會對引用類型再進行監(jiān)控嘱腥。
vue3
vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式耕渴，通過new Proxy()來劫持各個屬性的setter，getter齿兔，在數(shù)據(jù)變動時發(fā)布消息給訂閱者橱脸，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
Vue 3.0與Vue 2.0的區(qū)別僅是數(shù)據(jù)劫持的方式由Object.defineProperty更改為Proxy代理分苇，其他代碼不變添诉。
12. v-model是如何實現(xiàn)的
13. 單向數(shù)據(jù)流
vue 組件間傳遞數(shù)據(jù)是單向的，即數(shù)據(jù)總是由父組件傳遞到子組件医寿，子組件在其內(nèi)部可以有自己維護的數(shù)據(jù)栏赴，但它無權(quán)修改父組件傳遞給它的數(shù)據(jù)，當開發(fā)者嘗試這樣做的時候靖秩，vue 將會報錯须眷。這樣做是為了組件間更好的解耦，在開發(fā)中可能有多個子組件依賴于父組件的某個數(shù)據(jù)沟突，假如子組件可以修改父組件數(shù)據(jù)的話花颗，一個子組件變化會引發(fā)所有依賴這個數(shù)據(jù)的子組件發(fā)生變化，所以 vue 不推薦子組件修改父組件的數(shù)據(jù)事扭，直接修改 props 會拋出警告捎稚。
14. 組件通信
（1）props
一般屬性，父傳子
函數(shù)屬性求橄，子傳父
父子通信比較常用的是今野，父傳子用props,子傳父用$emit(方法， 參數(shù))
（2）事件總線罐农，通過一個空的vue實例作為事件總線条霜，用來觸發(fā)和監(jiān)聽事件。$on與$emit
可以實現(xiàn)任意組件間通信
（3）vuex
狀態(tài)管理涵亏。最常用宰睡，最方便蒲凶。可以實現(xiàn)任意關(guān)系組件的通信拆内。
（4）$parent,$children與ref
ref如果在子組件上旋圆，就指向子組件實例
15. vuex管理狀態(tài)的機制
vuex用來管理共享狀態(tài)
state是共享狀態(tài)的集合，getters通過操作state獲得派生狀態(tài)麸恍，mutations是操作state數(shù)據(jù)的方法集合灵巧，actions讓mutations中的方法能夠在異步操作中起作用
16. vue實例的生命周期
在beforeCreate 鉤子函數(shù)調(diào)用的時候，是獲取不到props 或者data 中的數(shù)據(jù)的抹沪，因為這些數(shù)據(jù)的初始化都在initState 中刻肄。
然后會執(zhí)行created 鉤子函數(shù)，在這一步的時候已經(jīng)可以訪問到之前不能訪問到的數(shù)據(jù)融欧，但是這時候組件還沒被掛載敏弃，所以是看不到的。
接下來會先執(zhí)行beforeMount 鉤子函數(shù)噪馏，開始創(chuàng)建VDOM麦到，最后執(zhí)行mounted 鉤子，并將VDOM 渲染為真實DOM 并且渲染數(shù)據(jù)逝薪。組件中如果有子組件的話隅要，會遞歸掛載子組件蝴罪，只有當所有子組件全部掛載完畢董济，才會執(zhí)行根組件的掛載鉤子。
再接下來是數(shù)據(jù)更新時會調(diào)用的鉤子函數(shù)beforeUpdate 和updated要门，這兩個鉤子函數(shù)沒什么好說的虏肾，就是分別在數(shù)據(jù)更新前和更新后會調(diào)用。
另外還有keep-alive 獨有的生命周期欢搜，分別為activated 和deactivated 封豪。用keep-alive 包裹的組件在切換時不會進行銷毀，而是緩存到內(nèi)存中并執(zhí)行deactivated 鉤子函數(shù)炒瘟，命中緩存渲染后會執(zhí)行actived 鉤子函數(shù)吹埠。
最后就是銷毀組件的鉤子函數(shù)beforeDestroy 和destroyed。前者適合移除事件疮装、定時器等等缘琅，否則可能會引起內(nèi)存泄露的問題。然后進行一系列的銷毀操作廓推，如果有子組件的話刷袍，也會遞歸銷毀子組件，所有子組件都銷毀完畢后才會執(zhí)行根組件的destroyed 鉤子函數(shù)樊展。
17. 何時需要使用beforeDestroy
當前頁面中使用了$on方法呻纹，那就需要在組件銷毀前解綁
清除自己定義的定時器
解除事件的綁定scroll, mousemove等
18. Vue模板編譯原理
19. 虛擬dom
20. diff算法
21. $.set
我們在data中定義一個對象后堆生，如果給對象增加新的屬性。則這個新增加的屬性不是響應(yīng)式的雷酪。當數(shù)據(jù)發(fā)生變化淑仆，并不會顯示到視圖。這是因為新添加的屬性沒有被Object.defineProperty劫持哥力，導致視圖不會同步更新糯景。解決辦法是使用this.$set(obj, 'name', 'jack')
對于數(shù)組，直接通過索引設(shè)置元素省骂，例如arr[] = 2
修改數(shù)組長度蟀淮，例如arr.length = 6
vue同樣不能監(jiān)測到數(shù)據(jù)變化
