「Vue2+Vue3」的 62 個(gè)知識(shí)點(diǎn)，看看你掌握了幾個(gè)？

作者：林三心不學(xué)挖掘機(jī) 2024-03-05 08:33:52

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

Vue3

1、Vue2 和 Vue3 的區(qū)別？

vue3 對于 typescript 的支持更加的好
vue3 的 Composition API， vue2 的 Option API
vue3 打包使用 tree-shaking 策略，體積更小
vue3 在模板編譯的階段會(huì)有靜態(tài)節(jié)點(diǎn)提升，運(yùn)行時(shí)性能更好
vue3 使用 Proxy 進(jìn)行響應(yīng)式處理，而 vue2 使用了 defineProperty
vue3 組件可以有多個(gè)根節(jié)點(diǎn)
vue3 多了 Fragment、Teleport、Suspense 這些內(nèi)置組件

2、v-if 與 v-for 的優(yōu)先級(jí)問題？

vue2 中 v-for 優(yōu)先級(jí)大于 v-if
vue3 中 v-if 優(yōu)先級(jí)大于 v-for

因?yàn)?Vue3 編譯后的寫法跟 Vue2 不一樣了

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

3、Tmeplate 和 JSX 的性能孰優(yōu)孰劣？

編譯時(shí)：JSX 編譯比 Template 快
運(yùn)行時(shí)：Template 性能比 JSX 好

因?yàn)?Template 解析時(shí)會(huì)有靜態(tài)節(jié)點(diǎn)提升這一步，而 JSX 沒有，所以編譯肯定是 JSX 更快，但是到了運(yùn)行時(shí)的時(shí)候， Template 的性能會(huì)更好，因?yàn)樗母滦矢?/p>

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

4、Composition API 比 Options API 好在哪？

Options API 寫法的最大缺點(diǎn)在于：邏輯寫的比較分散，比如我寫一個(gè)邏輯，我可能需要在 comuted、watch、data 中寫有關(guān)這個(gè)邏輯的代碼，比較分散，后續(xù)維護(hù)找起來成本比較高

圖片

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

圖片

5、Proxy 和 DefineProperty 哪個(gè)性能好？

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

但是如果是從 Vue3 響應(yīng)式處理的角度上，毫無疑問是 Proxy 更優(yōu)，因?yàn)轫憫?yīng)式涉及到了對于對象的深度遍歷，如果使用 DefineProperty 的話那么深度遍歷很浪費(fèi)性能，但是 Proxy 確不需要去深度遍歷，它是惰性劫持的，在響應(yīng)式的處理上，性能更佳

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

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

6、watch 和 watchEffect 的區(qū)別？

這兩個(gè)都是用來監(jiān)聽響應(yīng)式數(shù)據(jù)變化的

watch：主動(dòng)去聲明需要監(jiān)聽的響應(yīng)式數(shù)據(jù)
watchEffect：不需要聲明，會(huì)自動(dòng)收集監(jiān)聽數(shù)據(jù)

圖片

watchEffect 可維護(hù)比較差，因?yàn)槟愫罄m(xù)維護(hù)很可能會(huì)忘了你監(jiān)聽了哪些數(shù)據(jù)

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

7、說說 Ref 和 ShallowRef 的區(qū)別？

shallowRef 用來包住一個(gè)基礎(chǔ)類型或者引用類型，如果是基礎(chǔ)類型那么跟 ref 基本沒區(qū)別，如果是引用類型的話，那么直接改深層屬性是不能觸發(fā)響應(yīng)式的，除非直接修改引用地址，如下：

圖片

注意：改深層屬性能改數(shù)據(jù)，只是沒觸發(fā)響應(yīng)式，所以當(dāng)下一次響應(yīng)式觸發(fā)的時(shí)候，你修改的深層數(shù)據(jù)會(huì)渲染到頁面上~

shallowRef 的用處主要用于一些比較大的但又變化不大的數(shù)據(jù)，比如我有一個(gè)表格數(shù)據(jù)，通過接口直接獲取，并且主要用在前端展示，需要修改一些深層的屬性，但是這些屬性并不需要立即表現(xiàn)在頁面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要計(jì)算 isOld 但是又不想觸發(fā)響應(yīng)式更新，所以可以用 shallowRef 包起來，進(jìn)而減少響應(yīng)式更新，優(yōu)化性能

圖片

8、說說 effectScope 和 onScopeDispose？

effectScope 可以有兩個(gè)作用：

收集副作用
全局狀態(tài)管理

收集副作用

比如我們封裝一個(gè)共用的 hooks，為了減少頁面隱患，肯定會(huì)統(tǒng)一收集副作用，并且在組件銷毀的時(shí)候去統(tǒng)一消除，比如以下代碼：

圖片

但是這么收集很麻煩， effectScope 能幫我們做到統(tǒng)一收集，并且通過 stop 方法來進(jìn)行清除，且 stop 執(zhí)行的時(shí)候會(huì)觸發(fā) effectScope 內(nèi)部的 onScopeDispose

圖片

我們可以利用 effectScope & onScopeDispose 來做一些性能優(yōu)化，比如下面這個(gè)例子，我們封裝一個(gè)鼠標(biāo)監(jiān)聽的 hooks

圖片

但是如果在頁面里調(diào)用多次的話，那么勢必會(huì)往 window 身上監(jiān)聽很多多余的事件，造成性能負(fù)擔(dān)，所以解決方案就是，無論頁面里調(diào)用再多次 useMouse，我們只往 window 身上加一個(gè)鼠標(biāo)監(jiān)聽事件

圖片

全局狀態(tài)管理

現(xiàn)在 Vue3 最火的全局狀態(tài)管理工具肯定是 Pinia 了，那么你們知道 Pinia 的原理是什么嗎？原理就是依賴了 effectScope

圖片

所以我們完全可以自己使用 effectScope 來實(shí)現(xiàn)自己的局部狀態(tài)管理，比如我們封裝一個(gè)通用組件，這個(gè)組件層級(jí)比較多，并且需要共享一些數(shù)據(jù)，那么這個(gè)時(shí)候肯定不會(huì)用 Pinia 這種全局狀態(tài)管理，而是會(huì)自己寫一個(gè)局部的狀態(tài)管理，這個(gè)時(shí)候 effectScope 就可以排上用場了

vueuse 中的 createGlobalState 就是為了這個(gè)而生

圖片

9、props 能直接解構(gòu)嗎？

如果直接解構(gòu)的話會(huì)丟失響應(yīng)式

圖片

所以想解構(gòu)需要使用 toRefs 或 toRef

圖片

10、Teleport 是干什么用的？

Teleport 是一個(gè)內(nèi)置組件，它可以將一個(gè)組件內(nèi)部的一部分模板“傳送”到該組件的 DOM 結(jié)構(gòu)外層的位置去

看這篇文章，詳細(xì)講了 Teleport 的應(yīng)用場景：一個(gè)超冷門的 Vue3 內(nèi)置組件，幫我優(yōu)化了66%的性能！

11、useAttrs 和 props 的區(qū)別？

props：只會(huì)接收類型定義的屬性
useAttrs：只會(huì)接收非 props 類型定義的屬性

也就是 props 和 useAttrs 是互補(bǔ)的

看下面的例子

注意：useAttrs 并不會(huì)自動(dòng)將橫桿命名的屬性轉(zhuǎn)成駝峰命名屬性，但是 props 是會(huì)的

圖片

12、Vue3 的響應(yīng)式原理是什么？

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

Vue2

1、Vue的優(yōu)點(diǎn)？Vue的缺點(diǎn)？

優(yōu)點(diǎn)：

漸進(jìn)式
組件化開發(fā)
虛擬dom
響應(yīng)式數(shù)據(jù)
單頁面路由
數(shù)據(jù)與視圖分開

缺點(diǎn)：

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

2、為什么說Vue是一個(gè)漸進(jìn)式框架？

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

圖片

3、Vue跟React的異同點(diǎn)？

相同點(diǎn)：

都是單向數(shù)據(jù)流
都使用了虛擬DOM的技術(shù)
都支持SSR
組件化開發(fā)

不同點(diǎn)：

前者template，后者JSX
數(shù)據(jù)改變，前者響應(yīng)式，后者手動(dòng)setState
React單向綁定，Vue雙向綁定
React狀態(tài)管理工具Redux、Mobx，Vue狀態(tài)管理工具Vuex

4、MVVM是什么？和MVC有何區(qū)別呢？

MVC

Model：負(fù)責(zé)從數(shù)據(jù)庫中取數(shù)據(jù)
View：負(fù)責(zé)展示數(shù)據(jù)
Controller：用戶交互的地方，例如點(diǎn)擊事件
思想：Controller將Model的數(shù)據(jù)展示在View上

圖片

MVVM

VM：就是View-Model，數(shù)據(jù)雙向綁定
Model：取數(shù)據(jù)的地方
View：展示數(shù)據(jù)的地方
思想：View和Model實(shí)現(xiàn)數(shù)據(jù)同步，不需要手動(dòng)更新

注意：Vue不嚴(yán)格符合MVVM，因?yàn)镸VVM規(guī)定Model和View不能直接通信，而Vue可以使用ref進(jìn)行通信

圖片

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

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

6、為什么data是個(gè)函數(shù)并且返回一個(gè)對象呢？

防止組件被多個(gè)頁面使用時(shí)，造成的變量互相污染

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

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

8、路由的幾種模式？

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

9、路由的鉤子函數(shù)？

全局鉤子

beforeEach：跳轉(zhuǎn)路由前

to：將要跳轉(zhuǎn)進(jìn)入的路由對象
from：將要離開的路由對象
next：執(zhí)行跳轉(zhuǎn)的方法

afterEach：路由跳轉(zhuǎn)后
to：將要跳轉(zhuǎn)進(jìn)入的路由對象

路由獨(dú)享鉤子

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

組件內(nèi)路由鉤子

beforeRouteEnter(to, from, next)：跳轉(zhuǎn)路由渲染組件時(shí)觸發(fā)
beforeRouteUpdate(to, from, next)：跳轉(zhuǎn)路由且組件被復(fù)用時(shí)觸發(fā)
beforeRouteLeave(to, from, next)：跳轉(zhuǎn)路由且離開組件時(shí)觸發(fā)

10、使用過哪些Vue的內(nèi)部指令呢？

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

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

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

12、如何設(shè)置動(dòng)態(tài)class，動(dòng)態(tài)style？

動(dòng)態(tài)class對象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
動(dòng)態(tài)class數(shù)組：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
動(dòng)態(tài)style對象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
動(dòng)態(tài)style數(shù)組：`

13、v-if和v-show有何區(qū)別？

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

14、computed和watch有何區(qū)別？

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

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

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

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

v-for優(yōu)先級(jí)高于v-if，每項(xiàng)都通過v-for渲染出來后再去通過v-if判斷顯隱，做了很多無用功

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

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

圖片

18、不需要響應(yīng)式的數(shù)據(jù)應(yīng)該怎么處理？

定義在data的return之外
使用Object.freeze進(jìn)行數(shù)據(jù)凍結(jié)

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

immediate：初次加載時(shí)立即執(zhí)行
deep：是否進(jìn)行深度監(jiān)聽
handler：監(jiān)聽的回調(diào)函數(shù)

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

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

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

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

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

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

原因：Vue出于性能考慮沒有對數(shù)組下標(biāo)進(jìn)行劫持，而是通過改寫數(shù)組原型方法
解決：

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

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

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

普通插槽普通插槽slot會(huì)被當(dāng)做子元素進(jìn)行解析，最終會(huì)被解析成一個(gè)_t函數(shù)，他接收的第一個(gè)參數(shù)為插槽的名稱，默認(rèn)是default，也就是_t('default')，執(zhí)行此函數(shù)進(jìn)行最終元素的渲染，如果是具名插槽，則傳對應(yīng)的插槽名作用域插槽插槽會(huì)被封裝成一個(gè)函數(shù)放置在scopeSlotes對象中，解析時(shí)_t第二個(gè)參數(shù)接收子組件的數(shù)據(jù)，并進(jìn)行渲染

24、為什么不建議用index做key，為什么不建議用隨機(jī)數(shù)做key？

舉個(gè)例子：

<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>

現(xiàn)在我執(zhí)行 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的話，其實(shí)是更新了原有的三項(xiàng)，并新增了小花，雖然達(dá)到了渲染目的，但是損耗性能

現(xiàn)在我們使用id來做key，渲染為

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

現(xiàn)在我執(zhí)行 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>

可以看出，原有的三項(xiàng)都不變，只是新增了小林這個(gè)人，這才是最理想的結(jié)果

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

25、自定義指令的鉤子函數(shù)？

這里只說Vue2的

bind：指令綁定到指定元素時(shí)調(diào)用，只調(diào)用一次
inserted：指定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
update：所在組件的 VNode 更新時(shí)調(diào)用
componnetUpdated：所在組件以及其子組件 VNode 全部更新后調(diào)用
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用

26、說說nextTick的用處？

修改數(shù)據(jù)時(shí)不能馬上得到最新的DOM信息，所以需要使用nextTick，在nectTick回調(diào)中可以獲取最新DOM信息

27、為什么nextTick優(yōu)先是微任務(wù)？

優(yōu)先是Promise.then方法，是個(gè)微任務(wù)，這樣可以避免多一次隊(duì)列，進(jìn)而少一次UI渲染，節(jié)省性能

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

SSR全稱Server Side Render

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

29、Vue響應(yīng)式是怎么實(shí)現(xiàn)的？

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

30、為什么只對對象劫持，而要對數(shù)組進(jìn)行方法重寫？

數(shù)組的元素大概率是成百上千的，所以對數(shù)組下標(biāo)進(jìn)行劫持的話會(huì)非常消耗性能。Vue通過對數(shù)組原型上方法的重寫，實(shí)現(xiàn)數(shù)組的響應(yīng)式

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是數(shù)組的話，則調(diào)用target.splice(key, 1, value)
第二步：判斷target是對象的話，再判斷傳入的key是否已存在target中

是：直接target[key] = value
否：調(diào)用defineReactive(target, key, val)進(jìn)行響應(yīng)式處理

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是否為數(shù)組，是的話調(diào)用target.splice(key, 1)
第二步：判斷target是對象的話，調(diào)用delete關(guān)鍵字刪除屬性，并調(diào)用__ob__.dep.notify進(jìn)行更新通知

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的原理？

維護(hù)一個(gè)數(shù)組，每次調(diào)用時(shí)講回調(diào)函數(shù)壓入這個(gè)數(shù)組，然后優(yōu)先選擇微任務(wù)，在微任務(wù)回調(diào)中去執(zhí)行數(shù)組中的所有回調(diào)，同時(shí)維護(hù)一個(gè)布爾值，確保每一次隊(duì)列進(jìn)行一次執(zhí)行數(shù)組所有回調(diào)

let callbacks = []; //回調(diào)函數(shù)
let pending = false;
function flushCallbacks() {
  pending = false; //把標(biāo)志還原為false
  // 依次執(zhí)行回調(diào)
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任務(wù)并按照優(yōu)先級(jí)優(yōu)雅降級(jí)的方式實(shí)現(xiàn)異步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是監(jiān)聽dom變化 也是一個(gè)異步方法
  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 {
  // 最后降級(jí)采用setTimeout
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

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

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

虛擬dom

虛擬dom是一個(gè)對象，一個(gè)描述真實(shí)DOM的對象，每次數(shù)據(jù)更新時(shí)，新舊虛擬DOM都會(huì)互相進(jìn)行同層對比，而diff算法優(yōu)化就是在此時(shí)做優(yōu)化的。

diff算法

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

如果舊節(jié)點(diǎn)和新節(jié)點(diǎn)都是文本節(jié)點(diǎn)，則新文本代替舊文本
如果舊節(jié)點(diǎn)有子節(jié)點(diǎn)，新節(jié)點(diǎn)沒，則刪除舊節(jié)點(diǎn)的子節(jié)點(diǎn)
如果舊節(jié)點(diǎn)沒有子節(jié)點(diǎn)，新節(jié)點(diǎn)有，則把子節(jié)點(diǎn)新增上去
如果都有子節(jié)點(diǎn)，則調(diào)用updateChildren方法進(jìn)行新舊子節(jié)點(diǎn)的對比
子節(jié)點(diǎn)對比為首尾對比法

37、如果子組件改變props里的數(shù)據(jù)會(huì)發(fā)生什么？

基礎(chǔ)類型：如果父傳給子的是基礎(chǔ)類型，修改則會(huì)報(bào)錯(cuò)
引用類型：如果父傳給子的是引用類型，修改屬性則會(huì)同時(shí)修改父組件數(shù)據(jù)

38、props怎么自定義驗(yàn)證

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

39、watch的immediate屬性有什么用？

Vue實(shí)例初始化的時(shí)候立即調(diào)用watch的監(jiān)聽回調(diào)函數(shù)

40、watch監(jiān)聽一個(gè)對象時(shí)，如何排除某些屬性的監(jiān)聽

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除對c，d屬性的監(jiān)聽
      .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、審查元素時(shí)發(fā)現(xiàn)data-v-xxxxx，這是啥？

樣式模塊化scoped的效果，在本組件的標(biāo)簽都會(huì)帶上data-v-xxx的屬性，然后通過屬性選擇器實(shí)現(xiàn)樣式模塊化的效果

42、vue的hook的使用？

同一組件中使用

這是我們常用的使用定時(shí)器的方式

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

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

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

7.2 父子組件使用

如果子組件需要在mounted時(shí)觸發(fā)父組件的某一個(gè)函數(shù)，平時(shí)都會(huì)這么寫：

//父組件
<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是響應(yīng)式的嗎？

引用數(shù)據(jù)類型響應(yīng)式，基礎(chǔ)數(shù)據(jù)類型不響應(yīng)式

44、Vue的el屬性和$mount優(yōu)先級(jí)？

同時(shí)存在時(shí)，el > $mount

45、動(dòng)態(tài)指令和參數(shù)使用過嗎？

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

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

更改如有組件上的key即可

47、自定義v-model

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

48、如何將獲取data中某一個(gè)數(shù)據(jù)的初始狀態(tài)？

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

49、計(jì)算變量時(shí)，methods和computed哪個(gè)好？

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

50、router.push、router.replace、router.go的區(qū)別？

router.push：跳轉(zhuǎn)，并向history棧中加一個(gè)記錄，可以后退到上一個(gè)頁面
router.replace：跳轉(zhuǎn)，不會(huì)向history棧中加一個(gè)記錄，不可以后退到上一個(gè)頁面
router.go：傳正數(shù)向前跳轉(zhuǎn)，傳負(fù)數(shù)向后跳轉(zhuǎn)

責(zé)任編輯：武曉燕來源：前端之神

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

「Vue2+Vue3」 的 62 個(gè)知識(shí)點(diǎn)，看看你掌握了幾個(gè)？