1、vue2和vue3響應(yīng)式原理

Vue2和Vue3的響應(yīng)式原理都是基于Object.defineProperty實現(xiàn)的，但是Vue3在性能和功能上做了一些優(yōu)化和改進。

Vue2的響應(yīng)式原理：

• Vue2通過Object.defineProperty對data中的屬性進行劫持，當(dāng)屬性值發(fā)生變化時，會觸發(fā)對應(yīng)的更新函數(shù)，從而更新視圖。

• Vue2通過Watcher來實現(xiàn)數(shù)據(jù)與視圖的雙向綁定，當(dāng)數(shù)據(jù)發(fā)生變化時，Watcher會通知對應(yīng)的視圖進行更新。

• Vue2的響應(yīng)式原理存在一些缺陷，例如無法監(jiān)聽數(shù)組的變化，需要通過特殊的方法來實現(xiàn).

Vue3的響應(yīng)式原理：

• Vue3使用Proxy代替了Object.defineProperty，Proxy可以監(jiān)聽到對象的所有屬性，包括新增和刪除操作。

• Vue3使用了WeakMap來存儲依賴關(guān)系，避免了Vue2中Watcher的內(nèi)存泄漏問題。

• Vue3支持了多個根節(jié)點的組件，可以更方便地進行組件的復(fù)用和組合。

2、Vue3帶來了什么

更快的渲染速度：Vue3使用了Proxy代理對象，可以更快地跟蹤數(shù)據(jù)變化，從而提高渲染速度。

更小的體積：Vue3的體積比Vue2更小，同時也支持按需加載，減少了頁面加載時間。

更好的TypeScript支持：Vue3對TypeScript的支持更加完善，可以更好地進行類型檢查和代碼提示。

更好的組件封裝：Vue3引入了Composition API，可以更好地封裝組件邏輯，使得組件更加可復(fù)用和易維護。

更好的響應(yīng)式系統(tǒng)：Vue3的響應(yīng)式系統(tǒng)進行了重構(gòu)，可以更好地處理嵌套對象和數(shù)組的變化，同時也提供了更多的API來處理響應(yīng)式數(shù)據(jù)。

總之，Vue3帶來了更好的性能、更小的體積、更好的TypeScript支持、更好的組件封裝和更好的響應(yīng)式系統(tǒng)，使得開發(fā)者可以更加高效地開發(fā)Vue應(yīng)用。

3、composition API 優(yōu)勢好處特點

3.1、為什么要選擇組合式API？

由于vue2有局限性：

• 組件的邏輯膨脹導(dǎo)致組件的可讀性變差；

• 無法跨組件重用代碼；

• vue2對TS的支持有限

3.2、組合式API解決了什么問題？

1、面對vue2的局限性，可以將相同的代碼組織在一起，而不會散落在各個角落

3.3、組合式API的優(yōu)點？

• composition API是根據(jù)邏輯相關(guān)性組織代碼的，提高可讀性和維護性

• 代碼量少，更好的重用邏輯代碼

• 沒有引入新的語法，只是單純函數(shù)

• 異常靈活

• 工具語法提示友好，因為是單純函數(shù)所以很容易實現(xiàn)語法提示、自動補償

• 更好的Typescript支持

• 在復(fù)雜功能組件中可以實現(xiàn)根據(jù)特性組織代碼，代碼內(nèi)聚性強

• 組件間代碼復(fù)用

4、setup配置

Vue 3中的 setup 函數(shù)接收兩個參數(shù)，分別是 props 和 context。

1、props：值為對象，包含: 組件外部傳遞過來。切組件內(nèi)部聲明接收了的屬性。需要注意的是，Vue3中的 props 是只讀的，即在setup 函數(shù)中不能修改 props 的值。如果需要修改傳遞過來的數(shù)據(jù)，可以使用響應(yīng)式對象或ref。

2、context：上下文對象。

• attrs:值為對象，包含組件外部傳遞過來，但沒有在props配置中聲明的屬性。相當(dāng)于this.$attrs

• slots:收到的插槽內(nèi)容，相當(dāng)于this.$slots

• emit:分發(fā)自定義事件的函數(shù)，相當(dāng)于this.$emit

注意：

1、這個鉤子會在created之前執(zhí)行

2、內(nèi)部不存在this

3、如果返回值是一個對象，那么這個對象中的鍵值對會被合并到created鉤子的this中，而在視圖上也能訪問相應(yīng)的數(shù)據(jù)值

5、ref與reactive

reactive:

(1)、它的響應(yīng)式是更加‘深層次’的，底層本質(zhì)是將傳入的數(shù)據(jù)包裝成一個Proxy。

(2)、參數(shù)必須是對象或者數(shù)組，如果要讓對象的某個元素實現(xiàn)響應(yīng)式時比較麻煩。需要使用toRefs

ref:

(1)、函數(shù)參數(shù)可以是基本數(shù)據(jù)類型，也可以接受對象類型

(2)、如果參數(shù)是對象類型時，其實底層的本質(zhì)還是reactive,系統(tǒng)會自動根據(jù)我們給ref傳入的值轉(zhuǎn)換成：reactive

(3)、在template中訪問，系統(tǒng)會自動添加.value;在js中需要手動.value

(4)、ref響應(yīng)式原理是依賴于Object.defineProperty()的get()和set()的。

6、計算屬性

6.1、什么是計算屬性：

1、computed函數(shù)，是用來定義計算屬性的，計算屬性不能修改。

2、模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。

3、計算屬性還可以依賴多個Vue 實例的數(shù)據(jù)，只要其中任一數(shù)據(jù)變化，計算屬性就會重新執(zhí)行，視圖也會更新。

methods和computed看起來都可以實現(xiàn)我們的功能， 那么為什么還要多一個計算屬性這個東西呢？

原因：

1、計算屬性會進行緩存，如果多次使用時，計算屬性只會調(diào)用一次；

2、而方法會使用一次則調(diào)用一次，因此計算屬性相對而言性能更好。

注意：

回調(diào)函數(shù)必須return，結(jié)果就是計算的結(jié)果

如果計算屬性依賴的數(shù)據(jù)發(fā)生變化，那么會重新計算

不要在計算中中進行異步操作

高級：computed有兩個方法，分別是set()和get()。

計算屬性可以直接讀取或者修改

如果要實現(xiàn)計算屬性的修改操作，那么computed的實參應(yīng)該是對象

• 讀取數(shù)據(jù)觸發(fā)get方法

• 修改數(shù)據(jù)觸發(fā)set方法，set函數(shù)的形參就是你賦給他的值

7、watch與watchEffect

1、watch和watchEffect都是vue3中的監(jiān)聽器，但是在寫法和使用上是有區(qū)別的，主要是介紹一下watch和watchEffect的使用方法以及他們之間的區(qū)別。

2、 watch 的工作原理：偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用。它默認(rèn)是惰性的——只有當(dāng)被偵聽的源發(fā)生變化時才執(zhí)行回調(diào)，不過，可以通過配置 immediate 為 true 來指定初始時立即執(zhí)行第一次。可以通過配置 deep 為 true，來指定深度監(jiān)視。

3、immdiate: 默認(rèn)情況下，偵聽器需要 data 后面值改變了才會生效，若需要偵聽器一進入頁面就生效，那就需要使用 immediate。 4、deep: 默認(rèn)情況下，偵聽器只會監(jiān)聽數(shù)據(jù)本身的改變，若要進行深度監(jiān)聽，那就需要使用 deep。 5、immediate 和 deep 配置在第三個參數(shù)對象里。 第一個參數(shù)：監(jiān)聽誰，第二個參數(shù)：回調(diào)函數(shù)，第三個參數(shù)：配置對象

7.1、watchEffect

watchEffect 函數(shù)的特點：

• 優(yōu)點：

  • 會自動收集依賴，不需要手動傳遞偵聽內(nèi)容——自動偵聽回調(diào)函數(shù)中使用到的響應(yīng)式數(shù)據(jù)。

  • 默認(rèn) immdiate 是 true，所以初始化時會立即執(zhí)行。

• 缺點：

  • 無法獲得變化前的值（oldVal）。

1、watch() 是懶執(zhí)行的：當(dāng)數(shù)據(jù)源發(fā)生變化時，才會執(zhí)行回調(diào)。但在某些場景中，我們希望在創(chuàng)建偵聽器時，立即執(zhí)行一遍回調(diào)。

2、watchEffect相當(dāng)于將watch 的依賴源和回調(diào)函數(shù)合并，當(dāng)任何你有用到的響應(yīng)式依賴更新時，該回調(diào)函數(shù)便會重新執(zhí)行。不同于 watch，watchEffect 的回調(diào)函數(shù)會被立即執(zhí)行（即 { immediate: true }）

3、簡單來說，watchEffect 是 Vue3 中的一個響應(yīng)式 API，它允許你監(jiān)聽響應(yīng)式狀態(tài)的變化，并在其發(fā)生變化時觸發(fā)副作用函數(shù)。這個特性非常有用，在我們需要對響應(yīng)式數(shù)據(jù)進行操作的時候，我們可以在監(jiān)聽到變化后馬上做出反應(yīng)。

8、provide與inject

1、provide和inject是一對新的API，用于在父組件中提供數(shù)據(jù)，然后在子組件中注入數(shù)據(jù)。

2、provide：是一個對象，或者是一個返回對象的函數(shù)。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。

3、inject：一個字符串?dāng)?shù)組，或者是一個對象。屬性值可以是一個對象，包含from和default默認(rèn)值。

//在父組件中，使用provide提供數(shù)據(jù)：
//name：定義提供 property的 name。
//value ：property的值。
 setup(){
    provide('info',"值")
  }
?
//在子組件中，使用inject注入數(shù)據(jù)
//name：接收 provide提供的屬性名。
//default：設(shè)置默認(rèn)值，可以不寫，是可選參數(shù)。
setup(){
    const info = inject("info")
    inject('info',"設(shè)置默認(rèn)值")
    return {
        info
    }
  }
?
//需要注意的是，provide和inject只能在setup函數(shù)中使用，而且provide提供的數(shù)據(jù)只能在其子組件中使用。如果要在兄弟組件中共享數(shù)據(jù)，可以使用一個共享的對象或者使用Vuex等狀態(tài)管理庫。

9.vue3新的生命周期鉤子

Vue3中新增了兩個生命周期鉤子函數(shù)：

beforeUnmount：在組件卸載之前調(diào)用，可以用來做一些清理工作，比如取消訂閱、清除定時器等。

onRenderTracked：在組件渲染時調(diào)用，可以用來監(jiān)視組件的狀態(tài)變化，比如打印組件的狀態(tài)、記錄組件的變化等。

除此之外，Vue3還對原有的生命周期鉤子函數(shù)進行了優(yōu)化和改進，比如：

beforeCreate和created合并為setup函數(shù)，使得組件的初始化更加簡潔和靈活。

beforeMount和mounted合并為onMounted函數(shù)，使得組件的掛載更加高效和可控。

beforeUpdate和updated合并為onUpdated函數(shù)，使得組件的更新更加精準(zhǔn)和可靠。

beforeDestroy和destroyed合并為onUnmounted函數(shù)，使得組件的卸載更加安全和可靠。

執(zhí)行最終順序：

Vue3生命周期：setup

Vue2生命周期：beforeCreate

Vue2生命周期：created

Vue3生命周期：onBeforeMount

Vue2生命周期：beForeMount

Vue3生命周期：onMounted

Vue2生命周期：mounted

Vue3生命周期：onBeforeUpdate

Vue2生命周期：beforeUpdate

Vue3生命周期：onUpdated

Vue2生命周期：updated

Vue3生命周期：onBeforeUnmount

Vue2生命周期：beforeUnmount

Vue3生命周期：onUnmounted

Vue2生命周期：unmounted

10、自定義hook函數(shù)

1、以函數(shù)形式抽離一些可復(fù)用的方法像鉤子一樣掛著，隨時可以引入和調(diào)用，實現(xiàn)高內(nèi)聚低耦合的目標(biāo)；

2、將可復(fù)用功能抽離為外部JS文件

3、函數(shù)名/文件名以use開頭，形如：useXX

4、引用時將響應(yīng)式變量或者方法顯式解構(gòu)暴露出來如：const {nameRef，F(xiàn)n} = useXX()

（在setup函數(shù)解構(gòu)出自定義hooks的變量和方法）

10.1、Vue3自定義Hooks和Vue2時代Mixin的關(guān)系：

Mixin不足 在 Vue 2 中，mixin 是將部分組件邏輯抽象成可重用塊的主要工具。但是，他們有幾個問題： 1、Mixin 很容易發(fā)生沖突：因為每個 mixin 的 property 都被合并到同一個組件中，所以為了避免 property 名沖突，你仍然需要了解其他每個特性。 2、可重用性是有限的：我們不能向 mixin 傳遞任何參數(shù)來改變它的邏輯，這降低了它們在抽象邏輯方面的靈活性。

10.2、vue3自定義hooks和vue2中mixin的區(qū)別和比較？

1、Mixin難以追溯的方法與屬性！Vue3自定義Hooks卻可以

2、無法向Mixin傳遞參數(shù)來改變邏輯，但是Vue3自定義Hooks卻可以：

3、Mixin同名變量會被覆蓋，Vue3自定義Hook可以在引入的時候?qū)ν兞恐孛?/p>

11、toRef和toRefs

toRef 和 toRefs 可以用來復(fù)制 reactive 里面的屬性然后轉(zhuǎn)成 ref，而且它既保留了響應(yīng)式，也保留了引用，也就是你從 reactive 復(fù)制過來的屬性進行修改后，除了視圖會更新，原有 ractive 里面對應(yīng)的值也會跟著更新，如果你知道 淺拷貝 的話那么這個引用就很好理解了，它復(fù)制的其實就是引用 + 響應(yīng)式 ref 不加 s 和 加 s 的區(qū)別就是這樣：

toRef: 復(fù)制 reactive 里的單個屬性并轉(zhuǎn)成 ref toRefs: 復(fù)制 reactive 里的所有屬性并轉(zhuǎn)成 ref

12、shallowReactive 與 shallowRef

1、shallowRef：只處理基本數(shù)據(jù)類型的響應(yīng)式

2、shallowReactive：只處理對象最外層屬性的響應(yīng)式（淺響應(yīng)式）

3、淺層作用的響應(yīng)式數(shù)據(jù)處理：只處理第一層對象的數(shù)據(jù)，再往下嵌套的數(shù)據(jù)，操作數(shù)據(jù)是不起作用的

4、shallowReative與shallowRef在某些特殊的應(yīng)用場景下,是可以提升性能的,前者針對對象,用于淺層作用的響應(yīng)式數(shù)據(jù)處理,而后者只處理基本數(shù)據(jù)類型的響應(yīng)式,不進行對象的響應(yīng)式處理。

13、readonly 與 shallowReadonly

readonly與shallowReadonly都是讓響應(yīng)式數(shù)據(jù)只具備讀的能力,后者是淺層次的只讀,也就是只對數(shù)據(jù)對象第一層起作用,深層次的嵌套,當(dāng)時用shallowReadonl()處理時,深層次數(shù)據(jù)支持被修改

1、readonly: 讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的 (深只讀)，讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的,接收一個響應(yīng)式數(shù)據(jù),經(jīng)過readonly加工處理一下,那么新賦值的數(shù)據(jù)都不允許修改

2、接受一個對象 (不論是響應(yīng)式還是普通的) 或是一個 ref，返回一個原值的只讀代理

3、shallowReadonly: 讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的 (淺只讀)，接收一個響應(yīng)式數(shù)據(jù),經(jīng)過shallowreadonly的處理,變成一個只讀的,只考慮對象的第一層數(shù)據(jù),不可以修改,但是第一層嵌套里的深層數(shù)據(jù)卻支持修改

4、讓一個響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x能力(淺只讀)

14、toRaw與markRaw轉(zhuǎn)換為普通數(shù)據(jù)和標(biāo)記屬性非響應(yīng)式

toRaw，將響應(yīng)式對象（由 reactive定義的響應(yīng)式）轉(zhuǎn)換為普通對象，然后賦值給新的變量（不影響原來的對象）

markRaw，標(biāo)記一個對象，使其不能成為一個響應(yīng)式對象。

toRaw: 作用： 將一個由 reactive 生成的響應(yīng)式對象轉(zhuǎn)為普通對象 使用場景：

1、用于讀取響應(yīng)式對象對應(yīng)的普通對象

2、對這個普通對象的所有操作，不會引起頁面更新。

markRaw: 作用：標(biāo)記一個對象，使其永遠(yuǎn)不會再成為響應(yīng)式對象 應(yīng)用場景： 1、有些值不應(yīng)被設(shè)置為響應(yīng)式的，例如復(fù)雜的第三方類庫等 2、當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時，跳過響應(yīng)式轉(zhuǎn)換可以提高性能

15、customRef 自定義ref使用

1、customRef：返回一個ref對象，可以顯示的控制依賴追蹤和觸發(fā)響應(yīng)

16、vue3中的父傳子，子傳父

1、父傳子：

1、在父組件的子組件標(biāo)簽上通過：傳到子組件的數(shù)據(jù)名=‘需要傳遞的數(shù)據(jù)’

2、子組件中通過props進行接收并在模板中使用

2、子傳父：

1、子組件觸發(fā)事件通過setup函數(shù)的第二個參數(shù)，context.emit來實現(xiàn)子傳父

17、響應(yīng)式數(shù)據(jù)的判斷isRef、isReactive、isReadonly、isProxy

1、isRef：判斷一個值是否為一個 ref 對象

2、isReactive：判斷一個對象是否是由 reactive創(chuàng)建的響應(yīng)式代理

3、isReadonly：判斷一個對象是否是由 readonly 創(chuàng)建的只讀代理

4、isProxy：判斷一個對象是否是由 reactive 或 readonly 創(chuàng)建的代理

18、vue3中使用插槽？

1、插槽 slot 通常用于兩個父子組件之間，最常見的應(yīng)用就是我們使用一些 UI 組件庫中的彈窗組件時，彈窗組件的內(nèi)容是可以讓我們自定義的，這就是使用了插槽的原理。

2、理解：

• slot 是 Vue3 中的內(nèi)置標(biāo)簽。

• slot 相當(dāng)于給子組件挖出了一個槽，可以用來填充內(nèi)容。

• 父組件中調(diào)用子組件時，子組件標(biāo)簽之間的內(nèi)容元素就是要放置的內(nèi)容，它會把 slot 標(biāo)簽替換掉

3、具名插槽：具有名字的 插槽。簡單來說這個具名插槽的目的就是讓一個蘿卜一個坑，讓它們呆在該呆的位置去。比如帶 name 的插槽<slot name="xx">被稱為具名插槽

4、作用域插槽：能夠接受參數(shù)的插槽就被稱為了作用域插槽。

19、vue3中路由守衛(wèi)onBeforeRouteLeave，onBeforeRouteUpdate？

vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個路由獨享的，或者組件級的。

1、vue3 router中新增的onBeforeRouteLeave方法表示添加一個導(dǎo)航守衛(wèi)，此方法會在組件將要離開的時候觸發(fā)，類似于以前的beforeRouteLeave，但onBeforeRouteLeave可以在任何組件中使用，當(dāng)組件被卸載的時候，導(dǎo)航守衛(wèi)也將被移除。當(dāng)我們使用router執(zhí)行跳轉(zhuǎn)或返回的時候，就會觸發(fā)onBeforeRouteLeave方法。

2、 onBeforeRouteUpdate：添加一個導(dǎo)航守衛(wèi)，在當(dāng)前位置即將更新時觸發(fā)。

import { onBeforeRouteUpdate } from "vue-router";
onBeforeRouteUpdate(to => {
   console.log(to, "路由變動");
});
?

3、onBeforeRouteLeave：添加一個導(dǎo)航守衛(wèi)，在當(dāng)前位置的組件將要離開時觸發(fā)。

//使用組件內(nèi)守衛(wèi)，對離開頁面事件做一些操作，
beforeRouteLeave(to, from, next){
    if(from.path=='/b'){ //當(dāng)前頁面路由
        next({replace: true,redirect: '/a'}); //目標(biāo)路由 重定向
    }else {
    next()
    }
}

20、vue3中使用vuex useStore？

1、在Vue3中，可以使用useStore函數(shù)來獲取Vuex store實例。useStore函數(shù)是一個Vue Composition API函數(shù)，它可以在組件中使用。

使用`useStore`函數(shù)的步驟如下：
?
1. 在組件中導(dǎo)入`useStore`函數(shù)和`createStore`函數(shù)。
?
import { useStore, createStore } from 'vuex'
?
2. 創(chuàng)建一個Vuex store實例。
?
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
?
3. 在組件中使用`useStore`函數(shù)來獲取Vuex store實例。
?
export default {
  setup() {
    const store = useStore()
    return {
      store
    }
  }
}
?
?
4. 在組件中使用Vuex store實例。
?
<template>
  <div>
    <p>Count: {{ store.state.count }}</p>
    <button @click="store.commit('increment')">Increment</button>
  </div>
</template>
?
<script>
import { useStore } from 'vuex'
?
export default {
  setup() {
    const store = useStore()
    return {
      store
    }
  }
}
</script>

21、vue3中使用vue-router，useRoute和useRouter ？

1、在Vue.js中，useRoute和useRouter是Vue Router提供的兩個鉤子函數(shù)，用于在組件中訪問路由信息和路由實例。

2、useRoute相當(dāng)于是vue2中的this.$route

import { useRoute } from 'vue-router'
export default {
setup() {
 const route = useRoute()
 console.log(route.path) // 當(dāng)前路由路徑
 return {
   route
 }
}
}

3、useRouter相當(dāng)于是vue2中的this.$router，可以使用useRouter進行路由跳轉(zhuǎn)

import { useRouter } from 'vue-router'
export default {
setup() {
 const router = useRouter()
 console.log(router.currentRoute.value.path) // 當(dāng)前路由路徑
?
 return {
   router
 }
}
}

4、區(qū)別：

useRoute函數(shù)返回當(dāng)前路由的信息對象，包括路由路徑、參數(shù)、查詢參數(shù)等信息。

useRouter函數(shù)返回Vue Router的實例，我們可以在組件中使用useRouter函數(shù)來獲取Vue Router的實例。

22、vue3單文件組件 script setup語法？

1、<script setup>是在單文件組件 (SFC) 中使用組合式 API的編譯時語法糖。相比于普通的 <script> 語法，它具有更多優(yōu)勢

• 更少的樣板內(nèi)容，更簡潔的代碼

• 能夠使用純 Typescript 聲明 props 和拋出事件。

• 更好的運行時性能 (其模板會被編譯成與其同一作用域的渲染函數(shù)，沒有任何的中間代理)。

• 更好的 IDE 類型推斷性能 (減少語言服務(wù)器從代碼中抽離類型的工作)。

23、vue3中nextTick使用

1、nextTick 是將回調(diào)推遲到下一個 DOM 更新周期之后執(zhí)行。在更改了一些數(shù)據(jù)以等待 DOM 更新后立即使用它

2、異步使用：

import { nextTick } from 'vue'
//異步使用
setup() {
 const message = ref('Hello!')
 const changeMessage = async newMessage => {
   message.value = newMessage
   await nextTick()
   console.log('Now DOM is updated')
 }
}
//基本使用
nextTick(()=>{
  ...
})

24、原型綁定全局屬性

1、通過config.globalProperties

2、通過provide注入：在應(yīng)用實例上設(shè)置一個可以被注入到應(yīng)用范圍內(nèi)所有組件中的值。當(dāng)組件要使用應(yīng)用提供的 provide 值時，必須用 inject 來接收。

3、在main.js中全局引入，然后在組件中獲取

25、vue3中使用keeplive ？

1、keep-alive是Vue提供的一個抽象組件，主要用于保留組件狀態(tài)或避免重新渲染。

2、<keep-alive> 包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀他們。

和<transition> 相似，<keep-alive> 是一個抽象組件，它自身不會渲染一個DOM元素，也不會出現(xiàn)在父組件鏈中。但是 keep-alive 會把其包裹的所有組件都緩存起來。

3、使用：

1、配置app.vue 使用v-if判斷是否緩存

2、添加meta屬性，在路由元信息中添加緩存的標(biāo)識

3、實現(xiàn)頁面的部分刷新

26、element-plus組件庫vant3.0ant

27、vue3中廢棄了過濾器1、過濾器：過濾器可以通俗理解成是一個特殊的方法，用來加工數(shù)據(jù)的

2、vue3要精簡代碼，并且filter功能重復(fù)，filter能實現(xiàn)的功能，methods和計算屬性基本上也可以實現(xiàn)。所以就干脆把filter這方面的vue源碼給刪掉，這樣的話，更加方便維護。

總結(jié)

到此這篇關(guān)于VUE3常見面試題總結(jié)的文章就介紹到這了,更多相關(guān)VUE3常見面試題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論