「Vue2+Vue3」 的 62 個知識點，看看你掌握了幾個？

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助100+名同學完成改造！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

Vue3

1、Vue2 和 Vue3 的區別？

2、v-if 與 v-for 的優先級問題？

因為 Vue3 編譯後的寫法跟 Vue2 不一樣了

如果想看比較詳細的講解，可以看我這篇文章：

3、Tmeplate 和 JSX 的效能孰優孰劣？

因為 Template 解析時會有 靜態節點提升 這一步，而 JSX 沒有，所以編譯肯定是 JSX 更快，但是到了執行時的時候， Template 的效能會更好，因為它的更新效率更高

如果想看比較詳細的講解，可以看我這篇文章：

4、Composition API 比 Options API 好在哪？

Options API 寫法的最大缺點在於：邏輯寫的比較分散，比如我寫一個邏輯，我可能需要在 comuted、watch、data 中寫有關這個邏輯的程式碼，比較分散，後續維護找起來成本比較高

Composition API 又稱 組合式 API ，你可以把一整套邏輯寫在同一塊地方，這樣開發或維護起來都非常方便

5、Proxy 和 DefineProperty 哪個效能好？

如果單純從 JavaScript 的層面來說的話，無疑是 DefineProperty 的效能更好

但是如果是從 Vue3 響應式處理的角度上，毫無疑問是 Proxy 更優，因為響應式涉及到了對於物件的深度遍歷，如果使用 DefineProperty 的話那麽深度遍歷很浪費效能，但是 Proxy 確不需要去深度遍歷，它是惰性劫持的，在響應式的處理上，效能更佳

如果想看比較詳細的講解，可以看我這篇文章：

6、watch 和 watchEffect 的區別？

這兩個都是用來監聽響應式數據變化的

watchEffect 可維護比較差，因為你後續維護很可能會忘了你監聽了哪些數據

感興趣的可以看我這篇文章：

7、說說 Ref 和 ShallowRef 的區別？

shallowRef 用來包住一個基礎型別或者參照型別，如果是基礎型別那麽跟 ref 基本沒區別，如果是參照型別的話，那麽直接改深層內容是不能觸發響應式的，除非直接修改參照地址，如下：

註意：改深層屬效能改數據，只是沒觸發響應式，所以當下一次響應式觸發的時候，你修改的深層數據會渲染到頁面上~

shallowRef 的用處主要用於一些比較大的但又變化不大的數據，比如我有一個表格數據，透過介面直接獲取，並且主要用在前端展示，需要修改一些深層的內容，但是這些內容並不需要立即表現在頁面上，比如以下例子，我只需要展示 name、age 欄位，至於 isOld 欄位並不需要展示，我想要計算 isOld 但是又不想觸發響應式更新，所以可以用 shallowRef 包起來，進而減少響應式更新，最佳化效能

8、說說 effectScope 和 onScopeDispose？

effectScope 可以有兩個作用：

收集副作用

比如我們封裝一個共用的 hooks，為了減少頁面隱患，肯定會統一收集副作用，並且在元件銷毀的時候去統一消除，比如以下程式碼：

但是這麽收集很麻煩， effectScope 能幫我們做到統一收集，並且透過 stop 方法來進行清除，且 stop 執行的時候會觸發 effectScope 內部的 onScopeDispose

我們可以利用 effectScope & onScopeDispose 來做一些效能最佳化，比如下面這個例子，我們封裝一個滑鼠監聽的 hooks

但是如果在頁面裏呼叫多次的話，那麽勢必會往 window 身上監聽很多多余的事件，造成效能負擔，所以解決方案就是，無論頁面裏呼叫再多次 useMouse，我們只往 window 身上加一個滑鼠監聽事件

全域狀態管理

現在 Vue3 最火的全域狀態管理工具肯定是 Pinia 了，那麽你們知道 Pinia 的原理是什麽嗎？原理就是依賴了 effectScope

所以我們完全可以自己使用 effectScope 來實作自己的局部狀態管理，比如我們封裝一個通用元件，這個元件層級比較多，並且需要共享一些數據，那麽這個時候肯定不會用 Pinia 這種全域狀態管理，而是會自己寫一個局部的狀態管理，這個時候 effectScope 就可以排上用場了

vueuse 中的 createGlobalState 就是為了這個而生

9、props 能直接解構嗎？

如果直接解構的話會遺失響應式

所以想解構需要使用 toRefs 或 toRef

10、Teleport 是幹什麽用的？

Teleport 是一個內建元件，它可以將一個元件內部的一部份樣版「傳送」到該元件的 DOM 結構外層的位置去

看這篇文章，詳細講了 Teleport 的套用場景：

11、useAttrs 和 props 的區別？

也就是 props 和 useAttrs 是互補的

看下面的例子

註意：useAttrs 並不會自動將橫桿命名的內容轉成駝峰命名內容，但是 props 是會的

12、Vue3 的響應式原理是什麽？

如果想看比較詳細的講解，可以看我這篇文章：

Vue2

1、Vue的優點？Vue的缺點？

優點：

缺點：

2、為什麽說Vue是一個漸進式框架？

Vue的全家桶，你可以選擇不用，或者只選幾樣去用，比如不用vuex

3、Vue跟React的異同點？

相同點：

不同點：

4、MVVM是什麽？和MVC有何區別呢？

MVC

MVVM

註意：Vue不嚴格符合MVVM，因為MVVM規定Model和View不能直接通訊，而Vue可以使用 ref 進行通訊

5、Vue和JQuery的區別在哪？為什麽放棄JQuery用Vue？

6、為什麽data是個函式並且返回一個物件呢？

防止元件被多個頁面使用時，造成的變量互相汙染

7、使用過哪些Vue的修飾詞呢？

8、路由的幾種模式？

9、路由的勾點函式？

全域勾點

路由獨享勾點

routes: [
{
path: '/xxx',
component: xxx,
beforeEnter: (to, from, next) => {
}
}
]

元件內路由勾點

10、使用過哪些Vue的內部指令呢？

11、元件之間的傳值方式有哪些？

12、如何設定動態 class，動態 style？

13、v-if和v-show有何區別？

14、computed和watch有何區別？

15、Vue的生命周期，講一講？

16、為什麽v-if和v-for不建議用在同一標簽？

v-for 優先級高於 v-if ，每項都透過 v-for 渲染出來後再去透過 v-if 判斷顯隱，做了很多無用功

17、 vuex的有哪些內容？用處是什麽？

18、不需要響應式的數據應該怎麽處理？

19、watch有哪些內容，分別有什麽用？

20、父子元件生命周期順序？

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

21、物件新內容無法更新檢視，刪除內容無法更新檢視，為什麽？怎麽辦？

22、直接arr[index] = xxx無法更新檢視怎麽辦？為什麽？怎麽辦？

23、插槽的使用以及原理？

具體：https://juejin.cn/post/6949848530781470733

普通插槽 普通插槽 slot 會被當做子元素進行解析，最終會被解析成一個 _t 函式，他接收的第一個參數為插槽的名稱，預設是 default ，也就是 _t('default') ，執行此函式進行最終元素的渲染，如果是具名插槽，則傳對應的插槽名 作用域插槽 插槽會被封裝成一個函式放置在 scopeSlotes 物件中，解析時 _t 第二個參數接收子元件的數據，並進行渲染

24、為什麽不建議用index做key，為什麽不建議用隨機數做key？

舉個例子：

<div v-for="(item, index) in list" :key="index">{{item.name}}</div>
list: [
{ name: '小明', id: '123' },
{ name: '小紅', id: '124' },
{ name: '小花', id: '125' }
]
渲染為
<div key="0">小明</

div>
<divkey="1">小紅</div>
<divkey="2">小花</div>
現在我執行 list.unshift({ name: '小林', id: '122' })
渲染為
<div key="0">小林</div>
<div key="1">小明</div>
<divkey="2">小紅</div>
<divkey="3">小花</div>

新舊對比
<div key="0">小明</div> <div key="0">小林</div>
<divkey="1">小紅</div><divkey="1">小明</div>
<divkey="2">小花</div><divkey="2">小紅</div>
<divkey="3">小花</div>
可以看出，如果用index做key的話，其實是更新了原有的三項，並新增了小花，雖然達到了渲染目的，但是損耗效能
現在我們使用id來做key，渲染為
<div key="123">小明</div>
<div key="124">小紅</div>
<divkey="125">小花</div>
現在我執行 list.unshift({ name: '小林', id: '122' })，渲染為
<div key="122">小林</div>
<div key="123">小明</div>
<divkey="124">小紅</div>
<divkey="125">小花</div>
新舊對比
<div key="122">小林</div>
<div key="123">小明</div> <divkey="123">小明</div>
<divkey="124">小紅</div><divkey="124">小紅</div>
<divkey="125">小花</div><divkey="125">小花</div>
可以看出，原有的三項都不變，只是新增了小林這個人，這才是最理想的結果












用 index 和用 隨機數 都是同理， 隨機數 每次都在變，做不到專一性，很 渣男 ，也很消耗效能，所以，拒絕 渣男 ，選擇 老實人

25、自訂指令的勾點函式？

這裏只說Vue2的

26、說說nextTick的用處？

修改數據時不能馬上得到最新的DOM資訊，所以需要使用nextTick，在nectTick回呼中可以獲取最新DOM資訊

27、為什麽nextTick優先是微任務？

優先是 Promise.then 方法，是個微任務，這樣可以避免多一次佇列，進而少一次UI渲染，節省效能

28、Vue的SSR是什麽？有什麽好處？

SSR全稱 Server Side Render

29、Vue響應式是怎麽實作的？

30、為什麽只對物件劫持，而要對陣列進行方法重寫？

陣列的元素大機率是成百上千的，所以對陣列下標進行劫持的話會非常消耗效能。Vue透過對陣列原型上方法的重寫，實作陣列的響應式

31、Vue的樣版編譯原理？

具體：https://juejin.cn/post/6969563640416436232

32、Vue的computed和watch的原理？

具體：https://juejin.cn/post/6974293549135167495

33、Vue.set方法的原理？

Vue.set(target, key, value)

exportdefaultfunctionset(target, key, val) {
if (Array.isArray(target)) {
target.length = Math.max(target.length, key)
target.splice(key, 1, val)
return val
}
const ob = target.__ob__
if (key in target && !(key in target.prototype) || !ob) {
target[key] = val
return val
}
defineReactive(target, key, val)
return val
}



34、Vue.delete方法的原理？

Vue.delete(target, key)

exportdefaultfunctiondel (target, key) {
if (Array.isArray(target)) {
target.splice(key, 1)
return
}
const ob = target.__ob__
if (!(key in target)) return
delete target[key]
if (!ob) return
ob.dep.notify()
}





35、nextTick的原理？

維護一個陣列，每次呼叫時講回呼函式壓入這個陣列，然後優先選擇微任務，在微任務回呼中去執行陣列中的所有回呼，同時維護一個布爾值，確保每一次佇列進行一次執行陣列所有回呼

let callbacks = []; //回呼函式
let pending = false;
functionflushCallbacks() {
pending = false; //把標誌還原為false
// 依次執行回呼
for (let i = 0; i < callbacks.length; i++) {
callbacks[i]();
}
}
let timerFunc; //先采用微任務並按照優先級優雅降級的方式實作異步重新整理
if (typeofPromise !== "undefined") {
// 如果支持promise
const p = Promise.resolve();
timerFunc = () => {
p.then(flushCallbacks);
};
} elseif (typeof MutationObserver !== "undefined") {
// MutationObserver 主要是監聽dom變化 也是一個異步方法
let counter = 1;
const observer = new MutationObserver(flushCallbacks);
const textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true,
});
timerFunc = () => {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
} elseif (typeof setImmediate !== "undefined") {
// 如果前面都不支持 判斷setImmediate
timerFunc = () => {
setImmediate(flushCallbacks);
};
} else {
// 最後降級采用setTimeout
timerFunc = () => {
setTimeout(flushCallbacks, 0);
};
}
exportfunctionnextTick(cb) {
callbacks.push(cb);
if (!pending) {
pending = true;
timerFunc();
}
}

36、說說 虛擬dom 和 diff演算法 吧？

虛擬dom

虛擬dom是一個物件，一個描述真實DOM的物件，每次數據更新時，新舊虛擬DOM都會互相進行同層對比，而diff演算法最佳化就是在此時做最佳化的。

diff演算法

37、如果子元件改變props裏的數據會發生什麽？

38、props怎麽自訂驗證

props: {
num: {
default: 1,
validator: function (value) {
// 返回值為false則驗證不透過，報錯
return [
1, 2, 3, 4, 5
].indexOf(value) !== -1
}
}
}
}


39、watch的immediate內容有什麽用？

Vue例項初始化的時候立即呼叫watch的監聽回呼函式

40、watch監聽一個物件時，如何排除某些內容的監聽

mounted() {
Object.keys(this.params)
.filter((_) => !["c", "d"].includes(_)) // 排除對c，d內容的監聽
.forEach((_) => {
this.$watch((vm) => vm.params[_], handler, {
deep: true,
});
});
},
data() {
return {
params: {
a: 1,
b: 2,
c: 3,
d: 4
},
};
},
watch: {
params: {
deep: true,
handler() {
this.getList;
},
},
}


41、審查元素時發現data-v-xxxxx，這是啥？

樣式模組化scoped的效果，在本元件的標簽都會帶上data-v-xxx的內容，然後透過內容選擇器實作樣式模組化的效果

42、vue的hook的使用？

這是我們常用的使用定時器的方式

exportdefault{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具體執行內容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}


上面做法不好的地方在於：得全域多定義一個timer變量，可以使用hook這麽做：

exportdefault{
methods:{
fn(){
let timer = setInterval(()=>{
//具體執行程式碼
console.log('1');
},1000);
this.$once('hook:beforeDestroy',()=>{
clearInterval(timer);
timer = null;
})
}
}
}


如果子元件需要在mounted時觸發父元件的某一個函式，平時都會這麽寫：

//父元件
<rl-child @childMounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},
// 子元件
mounted () {
this.$emit('childMounted')
},

使用hook的話可以更方便：

//父元件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
childMountedHandle() {
// do something...
}
},


43、provide和inject是響應式的嗎？

參照數據型別響應式，基礎數據型別不響應式

44、Vue的el內容和$mount優先級？

同時存在時， el > $mount

45、動態指令和參數使用過嗎？

<aButton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />


46、相同的路由元件如何重新渲染？

更改如有元件上的key即可

47、自訂v-model

exportdefault: {
model: {
event: 'change',
prop: 'checked'
}
}


48、如何將獲取data中某一個數據的初始狀態？

使用 this.$options.data().xxx 獲取初始值

49、計算變量時，methods和computed哪個好？

computed比較好，computed有緩存機制，可以節省效能。而method則每次更新都會重新計算，不考慮緩存

50、router.push、router.replace、router.go的區別？

結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~