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

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

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

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

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

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

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

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

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

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

2、Vue3帶來(lái)了什么

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

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

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

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

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

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

3、composition API 優(yōu)勢(shì)好處特點(diǎn)

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

由于vue2有局限性：

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

• 無(wú)法跨組件重用代碼；

• vue2對(duì)TS的支持有限

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

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

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

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

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

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

• 異常靈活

• 工具語(yǔ)法提示友好，因?yàn)槭菃渭兒瘮?shù)所以很容易實(shí)現(xiàn)語(yǔ)法提示、自動(dòng)補(bǔ)償

• 更好的Typescript支持

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

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

4、setup配置

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

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

2、context：上下文對(duì)象。

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

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

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

注意：

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

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

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

5、ref與reactive

reactive:

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

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

ref:

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

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

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

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

6、計(jì)算屬性

6.1、什么是計(jì)算屬性：

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

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

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

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

原因：

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

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

注意：

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

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

不要在計(jì)算中中進(jìn)行異步操作

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

計(jì)算屬性可以直接讀取或者修改

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

• 讀取數(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ā)生變化時(shí)才執(zhí)行回調(diào)，不過，可以通過配置 immediate 為 true 來(lái)指定初始時(shí)立即執(zhí)行第一次?？梢酝ㄟ^配置 deep 為 true，來(lái)指定深度監(jiān)視。

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

7.1、watchEffect

watchEffect 函數(shù)的特點(diǎn)：

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

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

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

• 缺點(diǎn)：

  • 無(wú)法獲得變化前的值（oldVal）。

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

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

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

8、provide與inject

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

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

3、inject：一個(gè)字符串?dāng)?shù)組，或者是一個(gè)對(duì)象。屬性值可以是一個(gè)對(duì)象，包含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ù)，可以使用一個(gè)共享的對(duì)象或者使用Vuex等狀態(tài)管理庫(kù)。

9.vue3新的生命周期鉤子

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

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

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

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

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

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ù)用的方法像鉤子一樣掛著，隨時(shí)可以引入和調(diào)用，實(shí)現(xiàn)高內(nèi)聚低耦合的目標(biāo)；

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

3、函數(shù)名/文件名以u(píng)se開頭，形如：useXX

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

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

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

Mixin不足 在 Vue 2 中，mixin 是將部分組件邏輯抽象成可重用塊的主要工具。但是，他們有幾個(gè)問題： 1、Mixin 很容易發(fā)生沖突：因?yàn)槊總€(gè) mixin 的 property 都被合并到同一個(gè)組件中，所以為了避免 property 名沖突，你仍然需要了解其他每個(gè)特性。 2、可重用性是有限的：我們不能向 mixin 傳遞任何參數(shù)來(lái)改變它的邏輯，這降低了它們?cè)诔橄筮壿嫹矫娴撵`活性。

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

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

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

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

11、toRef和toRefs

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

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

12、shallowReactive 與 shallowRef

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

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

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

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

13、readonly 與 shallowReadonly

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

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

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

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

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

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

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

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

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

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

2、對(duì)這個(gè)普通對(duì)象的所有操作，不會(huì)引起頁(yè)面更新。

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

15、customRef 自定義ref使用

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

16、vue3中的父?jìng)髯?，子傳?/h2>

1、父?jìng)髯樱?/p>

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

2、子組件中通過props進(jìn)行接收并在模板中使用

2、子傳父：

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

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

1、isRef：判斷一個(gè)值是否為一個(gè) ref 對(duì)象

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

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

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

18、vue3中使用插槽？

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

2、理解：

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

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

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

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

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

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

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

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

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

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

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

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

20、vue3中使用vuex useStore？

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

使用`useStore`函數(shù)的步驟如下：
?
1. 在組件中導(dǎo)入`useStore`函數(shù)和`createStore`函數(shù)。
?
import { useStore, createStore } from 'vuex'
?
2. 創(chuàng)建一個(gè)Vuex store實(shí)例。
?
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})
?
3. 在組件中使用`useStore`函數(shù)來(lái)獲取Vuex store實(shí)例。
?
export default {
  setup() {
    const store = useStore()
    return {
      store
    }
  }
}
?
?
4. 在組件中使用Vuex store實(shí)例。
?
<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提供的兩個(gè)鉤子函數(shù)，用于在組件中訪問路由信息和路由實(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進(jìn)行路由跳轉(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)前路由的信息對(duì)象，包括路由路徑、參數(shù)、查詢參數(shù)等信息。

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

22、vue3單文件組件 script setup語(yǔ)法？

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

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

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

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

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

23、vue3中nextTick使用

1、nextTick 是將回調(diào)推遲到下一個(gè) 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í)例上設(shè)置一個(gè)可以被注入到應(yīng)用范圍內(nèi)所有組件中的值。當(dāng)組件要使用應(yīng)用提供的 provide 值時(shí)，必須用 inject 來(lái)接收。

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

25、vue3中使用keeplive ？

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

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

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

3、使用：

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

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

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

26、element-plus組件庫(kù)vant3.0ant

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

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

總結(jié)

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