Vue3

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

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

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

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

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

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

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

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

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

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

4、Composition API 比 Options API 好在哪？

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

圖片

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

圖片

5、Proxy 和 DefineProperty 哪個性能好？

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

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

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

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

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

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

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

圖片

圖片

watchEffect 可維護比較差，因為你后續(xù)維護很可能會忘了你監(jiān)聽了哪些數(shù)據(jù)

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

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

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

圖片

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

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

圖片

8、說說 effectScope 和 onScopeDispose？

effectScope 可以有兩個作用：

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

收集副作用

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

圖片

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

圖片

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

圖片

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

圖片

全局狀態(tài)管理

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

圖片

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

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

圖片

圖片

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

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

圖片

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

圖片

10、Teleport 是干什么用的？

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

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

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

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

也就是 props 和 useAttrs 是互補的

看下面的例子

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

圖片

圖片

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

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

Vue2

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

優(yōu)點：

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

缺點：

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

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

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

圖片

3、Vue跟React的異同點？

相同點：

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

不同點：

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

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

MVC

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

圖片

MVVM

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

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

圖片

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

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

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

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

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

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

8、路由的幾種模式？

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

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

全局鉤子

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

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

• afterEach：路由跳轉(zhuǎn)后

• to：將要跳轉(zhuǎn)進入的路由對象

路由獨享鉤子

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

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

• beforeRouteEnter(to, from, next)：跳轉(zhuǎn)路由渲染組件時觸發(fā)
• beforeRouteUpdate(to, from, next)：跳轉(zhuǎn)路由且組件被復用時觸發(fā)
• beforeRouteLeave(to, from, next)：跳轉(zhuǎn)路由且離開組件時觸發(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：隱藏雙括號，有值再顯示

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

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

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

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

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

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

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

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

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

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

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

v-for優(yōu)先級高于v-if，每項都通過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進行數(shù)據(jù)凍結(jié)

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

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

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出于性能考慮沒有對數(shù)組下標進行劫持，而是通過改寫數(shù)組原型方法
• 解決：

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

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

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

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

24、為什么不建議用index做key，為什么不建議用隨機數(shù)做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>

現(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的話，其實是更新了原有的三項，并新增了小花，雖然達到了渲染目的，但是損耗性能

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

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

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

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

這里只說Vue2的

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

26、說說nextTick的用處？

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

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

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

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

SSR全稱Server Side Render

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

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

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

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

數(shù)組的元素大概率是成百上千的，所以對數(shù)組下標進行劫持的話會非常消耗性能。Vue通過對數(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)進行響應(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進行更新通知

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

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

let callbacks = []; //回調(diào)函數(shù)
let pending = false;
function flushCallbacks() {
  pending = false; //把標志還原為false
  // 依次執(zhí)行回調(diào)
  for (let i = 0; i < callbacks.length; i++) {
    callbacks[i]();
  }
}
let timerFunc; //先采用微任務(wù)并按照優(yōu)先級優(yōu)雅降級的方式實現(xiàn)異步刷新
if (typeof Promise !== "undefined") {
  // 如果支持promise
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
  };
} else if (typeof MutationObserver !== "undefined") {
  // MutationObserver 主要是監(jiān)聽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的對象，每次數(shù)據(jù)更新時，新舊虛擬DOM都會互相進行同層對比，而diff算法優(yōu)化就是在此時做優(yōu)化的。

diff算法

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

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

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

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

38、props怎么自定義驗證

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

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

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

40、watch監(jiān)聽一個對象時，如何排除某些屬性的監(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、審查元素時發(fā)現(xiàn)data-v-xxxxx，這是啥？

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

42、vue的hook的使用？

• 同一組件中使用

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

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

上面做法不好的地方在于：得全局多定義一個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時觸發(fā)父組件的某一個函數(shù)，平時都會這么寫：

//父組件
<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)先級？

同時存在時，el > $mount

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

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

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

更改如有組件上的key即可

47、自定義v-model

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

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

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

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

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

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

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