1.35 reactive與ref的區(qū)別住册？

Vue3 中的 ref 和 reactive 是 Vue3 中用于數(shù)據(jù)管理的兩種不同的響應(yīng)式 API。

ref 用于創(chuàng)建一個包裝簡單值的響應(yīng)式引用，例如一個數(shù)字、字符串或?qū)ο蟆．?dāng) ref 創(chuàng)建一個響應(yīng)式引用時昼接，它返回一個對象灌旧，該對象具有一個 value 屬性绑咱，該屬性指向?qū)嶋H值。當(dāng) ref 返回的對象中的 value 屬性更改時枢泰，組件將自動重新渲染描融。

reactive 用于創(chuàng)建一個響應(yīng)式對象，該對象可以包含多個屬性和嵌套屬性衡蚂。當(dāng)使用 reactive 創(chuàng)建響應(yīng)式對象時窿克，返回的對象是一個代理對象，該對象具有與原始對象相同的屬性毛甲，并且任何對代理對象屬性的更改都將觸發(fā)組件的重新渲染年叮。

1.36 $route 和 $router 的區(qū)別？

$route 是“路由信息對象”玻募，包括 path只损，params，hash七咧，query跃惫，fullPath，matched艾栋，name 等路由信息參數(shù)

$router 是“路由實例”想要導(dǎo)航到不同URL 對象包括了路由的跳轉(zhuǎn)方法爆存，鉤子函數(shù)等。

1.37 v-on可以監(jiān)聽多個方法嗎蝗砾？

可以一個元素綁定多個事件的兩種寫法先较，一個事件綁定多個函數(shù)的兩種寫法，修飾符的使用悼粮。

<a>doSomething </a>

在method方法里面分別寫兩個事件闲勺；

<button @click="a(),b()">點我ab</button>

1.38 v-model的使用？

v-model實現(xiàn)雙向綁定的語法糖扣猫，常用于表單與組件之間的數(shù)據(jù)雙向綁定.

V-model的原理：

• v-bind綁定一個value屬性

• v-on指令給當(dāng)前元素綁定input事件

可看出v-model綁定在表單上時霉翔，v-model其實就是v-bind綁定value和v-on監(jiān)聽input事件的結(jié)合體

組件上的雙向綁定（原理）

v-model綁定在組件上的時候做了以下步驟

• 在父組件內(nèi)給子組件標(biāo)簽添加 v-model ，其實就是給子組件綁定了 value 屬性
• 子組件內(nèi)使用 prop 創(chuàng)建 創(chuàng)建 value 屬性可以拿到父組件傳遞下來的值苞笨，名字必須是 value。
• 子組件內(nèi)部更改 value 的時候子眶，必須通過 $emit 派發(fā)一個 input 事件瀑凝，并攜最新的值
• v-model 會自動監(jiān)聽 input 事件，把接收到的最新的值同步賦值到 v-model 綁定的變量上

1.39 vue遇到的坑臭杰，如何解決的粤咪？

• 用webpack打包后訪問index.html出現(xiàn)資源加載404問題，解決：開發(fā)環(huán)境的static文件夾是基于根目錄的渴杆，所以直接用‘/’ 寥枝。
• vue中宪塔，假如，你引入某個樣式囊拜，然后這個樣式里面有引用到圖片某筐，如果你的文件中沒有這個圖片，這時候冠跷，即使你沒有引用這個圖片對應(yīng)的類名南誊，但是只要你有引入這個css文件，他找不到相應(yīng)路徑圖片也會報錯Ｃ弁小３簟！
• 用for循環(huán)出來的列表橄务，在設(shè)置列表中的元素的動態(tài)屬性時幔托，需要加bind屬性“：”，不然動態(tài)屬性設(shè)置不出來
• 在vue中的html中的img中的src不可以直接設(shè)置為變量蜂挪，在data里面直接引路徑重挑，只能通過import的形式引入,值得注意的是，引用這個方式的時候src是變量需要加“：”锅劝，不然會報錯Ｔ艹邸！９示簟２７唷！
• 在中使用v-for="(item ,index) in list"進(jìn)行循環(huán)時诬垂，需要注意加：:key=“index”,不然會出現(xiàn)警告劲室！
• 父組件ajax異步更新數(shù)據(jù)，子組件props獲取不到

應(yīng)用場景

當(dāng)父組件 axjos 獲取數(shù)據(jù)结窘，子組件使用 props 接收數(shù)據(jù)時很洋，執(zhí)行 mounted 的時候 axjos 還沒有返回數(shù)據(jù)，而且 mounted 只執(zhí)行一次隧枫，這時 props 中接收的數(shù)據(jù)為空

解決方案：在對應(yīng)組件中判斷數(shù)據(jù)的長度

1.40 說說vue中的diff算法喉磁？

diff算法 當(dāng)data發(fā)生改變 會根據(jù)新的數(shù)據(jù)生成一個新的虛擬dom ，新的虛擬dom和舊的虛擬dom進(jìn)行對比官脓，這個對比的過程就是diff算法协怒。

Vue2 是全量 Diff（當(dāng)數(shù)據(jù)發(fā)生變化，它就會新生成一個DOM樹卑笨，并和之前的DOM樹進(jìn)行比較孕暇，找到不同的節(jié)點然后更新。）；Vue3 是靜態(tài)標(biāo)記 + 非全量 Diff（Vue 3在創(chuàng)建虛擬DOM樹的時候妖滔，會根據(jù)DOM中的內(nèi)容會不會發(fā)生變化隧哮，添加一個靜態(tài)標(biāo)記。之后在與上次虛擬節(jié)點進(jìn)行對比的時候座舍，就只會對比這些帶有靜態(tài)標(biāo)記的節(jié)點沮翔。）

使用最長遞增子序列優(yōu)化對比流程，可以最大程度的減少 DOM 的移動簸州，達(dá)到最少的 DOM 操作

1.41 vue中怎么設(shè)置全局變量和全局組件鉴竭？

在main.js中

app.config.globalProperties.$key = '' //定義全局變量

import {getCurrentInstance} from 'vue';

setup(){

const { proxy } = getCurrentInstance();

console.log(proxy.\$key);

}

1.45 vue中給對象添加新屬性時，界面不刷新怎么辦?

vue2的響應(yīng)式原理使用的是對象代理去實現(xiàn)的,對象代理中有一個get和set方法,當(dāng)我們訪問對象的時候就會觸發(fā)get方法,當(dāng)我們對對象中的值進(jìn)行修改時會觸發(fā)set方法岸浑。但是當(dāng)我們給對象添加一個新的屬性時對象代理是檢測不到的,所以就會出現(xiàn)直接給對象添加屬性響應(yīng)式不生效的問題搏存。

所以在vue中可以使用this.$set(對象名,‘屬性名’,屬性值)的方法去給對象添加屬性,或者使用Vue.set(對象名,‘屬性名’,屬性值)的方法進(jìn)行添加,添加之后的屬性就帶有響應(yīng)式了

1.46 vuex中的輔助函數(shù)怎么使用？

vuex的輔助函數(shù)有4個

• mapState 函數(shù)返回的是一個對象矢洲。通常璧眠，我們需要使用一個工具函數(shù)將多個對象合并為一個，以使我們可以將最終對象傳給 computed 屬性读虏。
• mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計算屬性责静，因此你可以這樣來使用他
• mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit，其原理就是將this.montify 映射為this.$store.commit(‘montify’)
• mapActions在組件中使用 this.$store.dispatch('prodect') 分發(fā) action盖桥，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用

1.47 刷新瀏覽器后灾螃，Vuex的數(shù)據(jù)是否存在？如何解決揩徊？

原因：因為 store 里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的腰鬼，當(dāng)頁面刷新時，頁面會重新加載vue實例塑荒，store里面的數(shù)據(jù)就會被重新賦值初始化熄赡。

localStorage 或者就是sessionStorage

下載持久化存儲插件。比如使用：vuex-along 的實質(zhì)也是將 vuex 中的數(shù)據(jù)存放到 localStorage 或者 sessionStroage 中齿税，只不過這個存取過程組件會幫我們完成彼硫，我們只需要用vuex的讀取數(shù)據(jù)方式操作就可以了

1.48 vue路由跳轉(zhuǎn)傳參的方式有哪些？

params傳參(顯示參數(shù))

• 在url中會顯示出傳參的值凌箕，刷新頁面不會失去拿到的參數(shù)拧篮，使用該方式傳值的時候，需要子路由提前配置好參數(shù)

params傳參(不顯示參數(shù))

• 在url中不會顯示出傳參的值牵舱，但刷新頁面會失去拿到的參數(shù)串绩，使用該方式 傳值 的時候，需要子路由提前配置好name參數(shù)

query 傳參

• query 傳過去的參數(shù)會拼接在地址欄中（?name=xx）仆葡，刷新頁面數(shù)據(jù)不會丟失，使用path和name都可以

VUE幾種路由跳轉(zhuǎn)幾種方式的區(qū)別

• this.$router.push：跳轉(zhuǎn)到指定url路徑，并想history棧中添加一個記錄沿盅，點擊后退會返回到上一個頁面
• this.$router.replace：跳轉(zhuǎn)到指定url路徑把篓，但是history棧中不會有記錄，點擊返回會跳轉(zhuǎn)到上上個頁面 (就是直接替換了當(dāng)前頁面)
• this.$router.go(n)：向前或者向后跳轉(zhuǎn)n個頁面腰涧，n可為正整數(shù)或負(fù)整數(shù)

1.50 單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點韧掩？

單頁面：顧名思義，只有一個頁面窖铡。一般是一個主頁和多個路由頁面組成疗锐。

優(yōu)點：

• 公共資源不重新加載，局部加載费彼，服務(wù)器壓力小
• 切換速度快滑臊，用戶體驗好
• 前后端分離

缺點：

• 不利于SEO（可以優(yōu)化：比如路由懶加載等）
• 初次加載時耗時多
• 開發(fā)難度較大（相對多頁面）

多頁面（Multi Page Application——MPA）：有多個HTML頁面，跳轉(zhuǎn)的時候是從一個html頁面跳到另一個頁面。

優(yōu)點：

• 利于SEO。
• 更容易擴(kuò)展裆站。
• 更易數(shù)據(jù)分析砸喻。

缺點：

• 開發(fā)成本高。
• 服務(wù)器壓力大熄求。
• 用戶體驗相對較差。

1.51 EventBus注冊在全局上時，路由切換時會重復(fù)觸發(fā)事件贮折，如何解決呢？

• 添加Bus.$off來關(guān)閉

  beforeDestroy () {

  bus.$off('get', this.myhandle)

  }

• 如果想要用bus 來進(jìn)行頁面組件之間的數(shù)據(jù)傳遞资盅，需要注意亮點调榄，組件emit事件應(yīng)在beforeDestory聲明周期內(nèi)。其次律姨，組件B內(nèi)的$on記得要銷毀振峻。

1.52 自定義指令詳解

為什么需要自定義指令：因為vue是MVVM模式，只需要關(guān)注于數(shù)據(jù)和業(yè)務(wù)邏輯择份，不需要關(guān)注DOM的操作扣孟，但是有時候面對一些特殊的業(yè)務(wù)需求時，需要進(jìn)行DOM的操作荣赶，這個時候就需要進(jìn)行自定義指令凤价。

自定義局部指令:在options api選項中的directives中設(shè)置。局部自定義指令是一個對象拔创，對象的屬性是自定義指令的名稱利诺，對象中屬性的值是自定義指令的鉤子函數(shù)對象

自定義全局指令:在app的directive方法。參數(shù)一（name）：自定義指令的名稱剩燥。參數(shù)二（hooks）：自定義指令的鉤子函數(shù)對象

1.53 slot是什么慢逾？有什么作用立倍？原理是什么？

slot又名插槽侣滩，是Vue的內(nèi)容分發(fā)機(jī)制口注，組件內(nèi)部的模板引擎使用slot元素作為承載分發(fā)內(nèi)容的出口。插槽slot是子組件的一個模板標(biāo)簽元素君珠，而這一個標(biāo)簽元素是否顯示寝志，以及怎么顯示是由父組件決定的。

slot又分三類策添，默認(rèn)插槽材部，具名插槽和作用域插槽。

• 默認(rèn)插槽：又名匿名插槽唯竹，當(dāng)slot沒有指定name屬性值的時候一個默認(rèn)顯示插槽乐导，一個組件內(nèi)只有有一個匿名插槽。
• 具名插槽：帶有具體名字的插槽摩窃，也就是帶有name屬性的slot兽叮，一個組件可以出現(xiàn)多個具名插槽。
• 作用域插槽：默認(rèn)插槽猾愿、具名插槽的一個變體鹦聪，可以是匿名插槽，也可以是具名插槽蒂秘，該插槽的不同點是在子組件渲染作用域插槽時泽本，可以將子組件內(nèi)部的數(shù)據(jù)傳遞給父組件，讓父組件根據(jù)子組件的傳遞過來的數(shù)據(jù)決定如何渲染該插槽姻僧。

實現(xiàn)原理：

當(dāng)子組件vm實例化時规丽，獲取到父組件傳入的slot標(biāo)簽的內(nèi)容，存放在vm.$slot中撇贺，默認(rèn)插槽為vm.$slot.default具名插槽為vm.$slot.xxx赌莺，xxx 為插槽名

當(dāng)組件執(zhí)行渲染函數(shù)時候，遇到slot標(biāo)簽松嘶，使用slot中的內(nèi)容進(jìn)行替換艘狭，此時可以為插槽傳遞數(shù)據(jù)，若存在數(shù)據(jù)翠订，則可稱該插槽為作用域插槽

1.54 $nextTick的使用

用法：將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行巢音。在修改數(shù)據(jù)之后立即使用它，然后等待DOM更新尽超。它跟全局方法 Vue.nextTick 一樣官撼，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上。

$nextTick() 的應(yīng)用場景

在vue的生命周期 created() 鉤子函數(shù)中進(jìn)行 dom 操作似谁，一定要放在 $nextTick() 函數(shù)中執(zhí)行傲绣。在 created() 鉤子函數(shù)執(zhí)行的時候 DOM 其實并未進(jìn)行任何渲染掠哥，而此時進(jìn)行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的代碼放進(jìn) nextTick() 的回調(diào)函數(shù)中秃诵。

mounted() 鉤子函數(shù)龙致，因為該鉤子函數(shù)執(zhí)行時，所有的 DOM 掛載和 渲染都已完成顷链，此時在該鉤子函數(shù)中進(jìn)行任何 DOM 操作都不會有問題

在數(shù)據(jù)變化后要執(zhí)行某個操作，而這個操作需要隨數(shù)據(jù)改變而改變DOM結(jié)構(gòu)時屈梁，這個操作都是需要放置 $nextTick() 的回調(diào)函數(shù)中嗤练。