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

作者：林三心不學挖掘機 2024-03-05 08:33:52

開發前端

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

Vue3

1、Vue2 和 Vue3 的區別？

vue3 對于 typescript 的支持更加的好
vue3 的 Composition API， vue2 的 Option API
vue3 打包使用 tree-shaking 策略，體積更小
vue3 在模板編譯的階段會有靜態節點提升，運行時性能更好
vue3 使用 Proxy 進行響應式處理，而 vue2 使用了 defineProperty
vue3 組件可以有多個根節點
vue3 多了 Fragment、Teleport、Suspense 這些內置組件

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

vue2 中 v-for 優先級大于 v-if
vue3 中 v-if 優先級大于 v-for

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

如果想看比較詳細的講解，可以看我這篇文章：v-for和v-if為啥不共存？回去等消息吧！答成這鬼樣！

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

編譯時：JSX 編譯比 Template 快
運行時：Template 性能比 JSX 好

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

如果想看比較詳細的講解，可以看我這篇文章：在Vue中，template和JSX到底哪個好？有思考過嗎？

4、Composition API 比 Options API 好在哪？

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

圖片

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

圖片

5、Proxy 和 DefineProperty 哪個性能好？

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

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

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

Vue3的響應式原理？一篇文章，八張圖，三心為你解密~
Proxy性能比defineProperty好？回去等通知吧？

6、watch 和 watchEffect 的區別？

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

watch：主動去聲明需要監聽的響應式數據
watchEffect：不需要聲明，會自動收集監聽數據

圖片

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

感興趣的可以看我這篇文章：Vue3這個API慎用！可能會有性能問題！

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 的應用場景：一個超冷門的 Vue3 內置組件，幫我優化了66%的性能！

11、useAttrs 和 props 的區別？

props：只會接收類型定義的屬性
useAttrs：只會接收非 props 類型定義的屬性

也就是 props 和 useAttrs 是互補的

看下面的例子

注意：useAttrs 并不會自動將橫桿命名的屬性轉成駝峰命名屬性，但是 props 是會的

圖片

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

如果想看比較詳細的講解，可以看我這篇文章：Vue3的響應式原理？一篇文章，八張圖，三心為你解密~

Vue2

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

優點：

漸進式
組件化開發
虛擬dom
響應式數據
單頁面路由
數據與視圖分開

缺點：

單頁面不利于seo
不兼容IE
首屏加載時間長

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

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

圖片

3、Vue跟React的異同點？

相同點：

都是單向數據流
都使用了虛擬DOM的技術
都支持SSR
組件化開發

不同點：

前者template，后者JSX
數據改變，前者響應式，后者手動setState
React單向綁定，Vue雙向綁定
React狀態管理工具Redux、Mobx，Vue狀態管理工具Vuex

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

MVC

Model：負責從數據庫中取數據
View：負責展示數據
Controller：用戶交互的地方，例如點擊事件
思想：Controller將Model的數據展示在View上

圖片

MVVM

VM：就是View-Model，數據雙向綁定
Model：取數據的地方
View：展示數據的地方
思想：View和Model實現數據同步，不需要手動更新

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

圖片

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

JQuery直接操作DOM，而Vue不直接操作DOM，而是只需操作數據
Vue的虛擬DOM技術，能適配多端
Vue集成了一些庫，大大提高開發效率，例如Route、Vuex等等

6、為什么data是個函數并且返回一個對象呢？

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

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

.lazy：輸入框失焦時才會更新v-model的值
.trim：講v-model綁定的值首位空格給去掉
.number：將v-medol綁定的值轉數字
.stop：阻止事件冒泡
.capture：事件的捕獲
.self：點擊事件綁定本身才觸發
.once：事件只觸發一次
.prevent：阻止默認事件
.native：綁定事件在自定義組件上時，確保能執行
.left、.middle、.right：鼠標左中右鍵的觸發
passive：相當于給移動端滾動事件加一個.lazy
camel：確保變量名會被識別成駝峰命名
.sync：簡化子修改父值的步驟

8、路由的幾種模式？

hash：哈希模式，根據hash值的更改進行組件切換，而不刷新頁面
history：歷史模式，依賴于HTML5的pushState和replaceState
abstract：適用于Node

9、路由的鉤子函數？

全局鉤子

beforeEach：跳轉路由前

to：將要跳轉進入的路由對象
from：將要離開的路由對象
next：執行跳轉的方法

afterEach：路由跳轉后
to：將要跳轉進入的路由對象

路由獨享鉤子

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

組件內路由鉤子

beforeRouteEnter(to, from, next)：跳轉路由渲染組件時觸發
beforeRouteUpdate(to, from, next)：跳轉路由且組件被復用時觸發
beforeRouteLeave(to, from, next)：跳轉路由且離開組件時觸發

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

v-text：元素的textContent
v-html：元素的innerHTML
v-show：通過樣式display改變顯隱
v-if：通過操作DOM改變顯隱
v-else：配合v-if
v-else-id：配合v-else
v-for：循環渲染
v-on：綁定事件，縮寫@
v-bind：綁定變量，縮寫:
v-model：雙向綁定
v-slot：插槽
v-once：只渲染一次
v-pre：跳過元素編譯
v-cloak：隱藏雙括號，有值再顯示

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

父傳子，子組件通過props接收
子傳父，子組件使用$emit對父組件進行傳值
父子之間通過$parent和$chidren獲取實例進而通信
通過vuex進行狀態管理
通過eventBus進行跨組件值傳遞
provide和inject，官方不建議使用
$ref獲取實例，進而傳值
路由傳值
localStorage、sessionStorage

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

動態class對象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
動態class數組：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
動態style對象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
動態style數組：`

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

v-if：通過操作DOM來控制顯隱，適用于偶爾顯隱的情況
v-show：通過改變樣式display屬性控制顯隱，適用于頻繁顯隱的情況

14、computed和watch有何區別？

computed：依賴多個變量計算出一個變量，且具有緩存機制，依賴值不變的情況下，會復用計算值。computed中不能進行異步操作
watch：通常監聽一個變量的變化，而去做一些事，可異步操作
簡單記就是：一般情況下computed的多對一，watch一對多

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

beforeCreate：實例Vue，未初始化和響應式數據
created：已初始化和響應式數據，可訪問數據
beforeMount：render調用，虛擬DOM生成，未轉真實DOM
mounted：真實DOM掛載完成
beforeUpdate：數據更新，新虛擬DOM生成
updated：新舊虛擬DOM進行對比，打補丁，然后進行真實DOM更新
beforeDestroy：實例銷毀前，仍可訪問數據
destroy：實例銷毀，子實例銷毀，指令解綁，解綁本實例的事件
activated：keep-alive所緩存組件激活時調用
deactivated：keep-alive所緩存組件停用時調用
errorCaptured：子孫組件的錯誤捕獲，此函數可返回false阻止繼續向上傳播

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

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

17、 vuex的有哪些屬性？用處是什么？

state：定義初始狀態
getter：從store從取數據
mutation：更改store中狀態，只能同步操作
action：用于提交mutation，而不直接更改狀態，可異步操作
module：store的模塊拆分

圖片

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

定義在data的return之外
使用Object.freeze進行數據凍結

19、watch有哪些屬性，分別有什么用？

immediate：初次加載時立即執行
deep：是否進行深度監聽
handler：監聽的回調函數

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

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

21、對象新屬性無法更新視圖，刪除屬性無法更新視圖，為什么？怎么辦？

原因：Object.defineProperty沒有對對象的新屬性進行劫持
解決：

新增屬性：Vue.set(target, key, value)
刪除屬性：Vue.delete(target, key)

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

原因：Vue出于性能考慮沒有對數組下標進行劫持，而是通過改寫數組原型方法
解決：

splice：arr.splice(index, 1, value)
Vue.set(target, index, value)

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>
<div key="1">小紅</div>
<div key="2">小花</div>

現在我執行 list.unshift({ name: '小林', id: '122' })

渲染為
<div key="0">小林</div>
<div key="1">小明</div>
<div key="2">小紅</div>
<div key="3">小花</div>


新舊對比

<div key="0">小明</div>  <div key="0">小林</div>
<div key="1">小紅</div>  <div key="1">小明</div>
<div key="2">小花</div>  <div key="2">小紅</div>
                         <div key="3">小花</div>

可以看出，如果用index做key的話，其實是更新了原有的三項，并新增了小花，雖然達到了渲染目的，但是損耗性能

現在我們使用id來做key，渲染為

<div key="123">小明</div>
<div key="124">小紅</div>
<div key="125">小花</div>

現在我執行 list.unshift({ name: '小林', id: '122' })，渲染為

<div key="122">小林</div>
<div key="123">小明</div>
<div key="124">小紅</div>
<div key="125">小花</div>

新舊對比

                           <div key="122">小林</div>
<div key="123">小明</div>  <div key="123">小明</div>
<div key="124">小紅</div>  <div key="124">小紅</div>
<div key="125">小花</div>  <div key="125">小花</div>

可以看出，原有的三項都不變，只是新增了小林這個人，這才是最理想的結果

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

25、自定義指令的鉤子函數？

這里只說Vue2的

bind：指令綁定到指定元素時調用，只調用一次
inserted：指定元素插入父節點時調用
update：所在組件的 VNode 更新時調用
componnetUpdated：所在組件以及其子組件 VNode 全部更新后調用
unbind：只調用一次，指令與元素解綁時調用

26、說說nextTick的用處？

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

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

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

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

SSR全稱Server Side Render

有利于SEO：由于是在服務端，將數據填充進HTML之后再推送到瀏覽器，所以有利于SEO的爬取
首屏渲染快

29、Vue響應式是怎么實現的？

1、劫持：通過Object.defineProperty對對象進行遞歸劫持屬性的get、set
2、觀察者模式：使用watcher進行觀察數據使用的地方
3、發布訂閱模式：使用dep收集watcher，數據更改時，通過notify方法通知dep里的watcher去進行相應的更新
4、數組：數組沒有使用劫持的模式，而是通過重寫數組原型上的方法，來實現數組的響應式

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)

第一步：判斷target是數組的話，則調用target.splice(key, 1, value)
第二步：判斷target是對象的話，再判斷傳入的key是否已存在target中

是：直接target[key] = value
否：調用defineReactive(target, key, val)進行響應式處理

export default function set(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)

第一步：判斷target是否為數組，是的話調用target.splice(key, 1)
第二步：判斷target是對象的話，調用delete關鍵字刪除屬性，并調用__ob__.dep.notify進行更新通知

export default function del (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;
function flushCallbacks() {
  pending = false; //把標志還原為false
  // 依次執行回調
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任務并按照優先級優雅降級的方式實現異步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (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);
  };
} else if (typeof setImmediate !== "undefined") {
  // 如果前面都不支持 判斷setImmediate
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 最后降級采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

export function nextTick(cb) {
  callbacks.push(cb);
  if (!pending) {
    pending = true;
    timerFunc();
  }
}

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

虛擬dom

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

diff算法

第一步：調用patch方法，傳入新舊虛擬DOM，開始同層對比
第二步：調用isSameNode方法，對比新舊節點是否同類型節點
第三步：如果不同，新節點直接代替舊節點
第四步：如果相同，調用patchNode進行對比節點

如果舊節點和新節點都是文本節點，則新文本代替舊文本
如果舊節點有子節點，新節點沒，則刪除舊節點的子節點
如果舊節點沒有子節點，新節點有，則把子節點新增上去
如果都有子節點，則調用updateChildren方法進行新舊子節點的對比
子節點對比為首尾對比法

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的使用？

同一組件中使用

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

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

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

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

7.2 父子組件使用

如果子組件需要在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

export default: {
  model: {
    event: 'change',
    prop: 'checked'  
  }
}

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

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

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

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

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

router.push：跳轉，并向history棧中加一個記錄，可以后退到上一個頁面
router.replace：跳轉，不會向history棧中加一個記錄，不可以后退到上一個頁面
router.go：傳正數向前跳轉，傳負數向后跳轉

責任編輯：武曉燕來源：前端之神

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