為了解決這些問題，Vue 提供了其他更高級的組件通信機(jī)制，如：

• Vuex（狀態(tài)管理）： 適用于管理大規(guī)模應(yīng)用的共享狀態(tài)，使得組件之間的數(shù)據(jù)共享和響應(yīng)變得更加簡單和可控。

• 事件總線： 可以通過 Vue 實(shí)例作為中央事件總線來實(shí)現(xiàn)組件之間的通信，盡管這也可能帶來一些全局狀態(tài)的問題。

• Provide / Inject： 可以在父組件中使用 provide，然后在子組件中使用 inject 來實(shí)現(xiàn)跨多層次的組件通信，但也會(huì)增加組件之間的依賴關(guān)系。

選擇合適的通信方式取決于應(yīng)用的規(guī)模、復(fù)雜度以及團(tuán)隊(duì)的偏好，但在設(shè)計(jì)時(shí)需要權(quán)衡各種因素來避免可能的問題。

Vuex???????

css scoped

每個(gè)vue文件生成一個(gè)唯一的id

div class="demo" data-v-27e4e96e></div>

css選擇器改造成屬性選擇器

.demo{color: red;}會(huì)被編譯成.demo[data-v-27e4e96e]{color: red;}

1）編譯時(shí)，會(huì)給每個(gè)vue文件生成一個(gè)唯一的id，會(huì)將此id添加到當(dāng)前文件中所有html的標(biāo)簽上

如<div class="demo"></div>會(huì)被編譯成<div class="demo" data-v-27e4e96e></div>

2）編譯style標(biāo)簽時(shí)，會(huì)將css選擇器改造成屬性選擇器，如.demo{color: red;}會(huì)被編譯成.demo[data-v-27e4e96e]{color: red;}

 // 頁面上 “屬性選擇器”這幾個(gè)字顯示紅色
 <div data-v-hash class="test-attr">屬性選擇器</div>  
  <style>
    /* 該標(biāo)簽有個(gè)data-v-hash的屬性，只不過該屬性為空，依然可以使用屬性選擇器 */ 
   .test-attr[data-v-hash] { 
    color: red; 
  } 
  </style>
  <script>
     // 通過js判斷是否存在 data-v-hash 屬性
     console.log(document.querySelector('.test-attr').getAttribute('data-v-hash') === ''); // true
  </script>

「歷時(shí)8個(gè)月」10萬字前端知識(shí)體系總結(jié)（前端框架+瀏覽器原理篇）?? - 掘金

熟悉??

4.路由之間如何傳參??
通過router-link路由導(dǎo)航跳轉(zhuǎn)傳遞
<router-link to=`/a/${id}`>routerlink傳參</router-link>
1
跳轉(zhuǎn)時(shí)使用push方法拼接攜帶參數(shù)。
? this.$router.push({
? ? ? ? ? path: `/getlist/${id}`,
? ? ? ? })
1
2
3
通過路由屬性中的name來確定匹配的路由，通過params來傳遞參數(shù)。
this.$router.push({
? ? ? ? ? name: 'Getlist',
? ? ? ? ? params: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? ? ? })
使用path來匹配路由，然后通過query來傳遞參數(shù)。
this.$router.push({
? ? ? ? ? path: '/getlist',
? ? ? ? ? query: {
? ? ? ? ? ? id: id
? ? ? ? ? }
? ? ? ? })
注意：query有點(diǎn)像ajax中的get請求，而params像post請求。

params在地址欄中不顯示參數(shù)，刷新頁面，參數(shù)丟失,
其余方法在地址欄中顯示傳遞的參數(shù)，刷新頁面，參數(shù)不丟失。

詳情請看Vue-router之簡單的路由傳參三種方法

5.談一談VUEX??
原理：Vuex是專門為vue.js應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具。
構(gòu)成:

state:vuex的基本數(shù)據(jù)，用來存儲(chǔ)變量，存放的數(shù)據(jù)是響應(yīng)式的。
mutations:提交更改數(shù)據(jù)，同步更新狀態(tài)。
actions:提交mutations，可異步操作。
getters：是store的計(jì)算屬性。
modules:模塊，每個(gè)模塊里面有四個(gè)屬性。
關(guān)于VUEX如何使用可以看VUE的傳值問題
6.如何解決vuex頁面刷新數(shù)據(jù)丟失問題？??
原因：因?yàn)関uex里的數(shù)據(jù)是保存在運(yùn)行內(nèi)存中的，當(dāng)頁面刷新時(shí)，頁面會(huì)重新加載vue實(shí)例，vuex里面的數(shù)據(jù)就會(huì)被清空。
解決方法：將vuex中的數(shù)據(jù)直接保存到瀏覽器緩存中。（一般是用sessionStorage）

9.Route和router的區(qū)別?
route:是路由信息對象，包括“path,parms,hash,name“等路由信息參數(shù)。
Router:是路由實(shí)例對象，包括了路由跳轉(zhuǎn)方法，鉤子函數(shù)等。
10.v-show和v-if的區(qū)別?
v-if:組件的銷毀和重建，更適合帶有權(quán)限的操作，切換開大。如果開始條件為false則什么都不做，只有為true才會(huì)編譯。
v-show:css切換，隱藏顯示更適合頻繁切換。在任何情況下都會(huì)被編譯，然后被緩存，而且dom元素會(huì)被保留。
11.vue中數(shù)據(jù)變了但是視圖不跟新怎么解決？?
原因：

數(shù)組數(shù)據(jù)變動(dòng)：使用某些方法操作數(shù)組，變動(dòng)數(shù)據(jù)時(shí)，有些方法無法被vue監(jiān)測。
Vue 不能檢測到對象屬性的添加或刪除。
異步更新隊(duì)列：數(shù)據(jù)第一次的獲取到了，也渲染了，但是第二次之后數(shù)據(jù)只有在再一次渲染頁面的時(shí)候更新，并不能實(shí)時(shí)更新。
12.vue中data為什么是函數(shù)而不是對象？??
官網(wǎng)中有這么一段介紹，詳情可以看組件的復(fù)用

意思就是，在Vue中組件是可以被復(fù)用的，而當(dāng)data是一個(gè)函數(shù)的時(shí)候，每一個(gè)實(shí)例的data都是獨(dú)立的，不會(huì)相互影響了。

更詳細(xì)的解釋 ==>

13.vue中父子組件傳值，父組件異步請求，子組件不能實(shí)時(shí)更新怎么解決？（vue中數(shù)據(jù)不能實(shí)時(shí)更新怎么解決？）???
首先了解父子組件生命周期執(zhí)行順序 ==>
加載渲染數(shù)據(jù)過程
父組件 beforeCreate -->
父組件 created -->
父組件 beforeMount -->
子組件 beforeCreate -->
子組件 created -->
子組件 beforeMount -->
子組件 mounted -->
父組件 mounted -->
原因：因?yàn)樯芷谥粫?huì)執(zhí)行一次，數(shù)據(jù)是要等到異步請求以后才能拿到，那么子組件的mounted鉤子執(zhí)行的時(shí)候，還沒有拿到父組件傳遞過來的數(shù)據(jù)，但是又必須要打印出來結(jié)果，那這樣的話，就只能去打印props中的默認(rèn)值空字符串了，所以打印的結(jié)果是一個(gè)空字符串。
解決辦法：

使用v-if控制組件渲染的時(shí)機(jī)
初始還沒拿到后端接口的異步數(shù)據(jù)的時(shí)候，不讓組件渲染，等拿到的時(shí)候再去渲染組件。使用v-if="變量"去控制，初始讓這個(gè)變量為false，這樣的話，子組件就不會(huì)去渲染，等拿到數(shù)據(jù)的時(shí)候，再讓這個(gè)變量變成true，
舉例：
? data() {
? ? return {
? ? ? isTrue:false // 初始為false
? ? };
? },
? monted(){
? this.$post.a.b.c.getData(res=>{
? ? ? ? if(res.result){
? ? ? ? ? ? this.isTrue = true
? ? ? ? ?}
? ? ?})
? }

使用watch監(jiān)聽數(shù)據(jù)的變化
舉例：
? props: {
? ? tableData: {
? ? ? type: Array,
? ? ? default: [],
? ? },
? },
? watch: {
? ? ?tableData(val){
? ? ? ? ?console.log(val)
? ? ?}
? },

使用VueX
14.父子組件傳參emit如何傳多個(gè)參數(shù)？?
子組件：

submit(){
?? ?this.$emit('g',1,2,3,4,5)
}

父組件

g(val1,val2,val3,val4,val5) {
?? ?console.log(val1,val2,val3,val4,val5)
}

15.Vue 路由跳轉(zhuǎn)方式??
router-link 標(biāo)簽跳轉(zhuǎn)
this.$router.push()
this.$router.replace()
this.$router.go(n)：（0：當(dāng)前頁，-1上一頁，+1下一頁，n代表整數(shù)）
16.條件渲染v-if 與 v-for 優(yōu)先級?
vue2.0文檔是這么說的

vue2列表渲染指南

vue3.0文檔是這么說的

vue3條件渲染

18.Vue 中 for循環(huán)為什么加 key？??
為了性能優(yōu)化， 因?yàn)関ue是虛擬DOM，更新DOM時(shí)用diff算法對節(jié)點(diǎn)進(jìn)行一一比對，比如有很多l(xiāng)i元素，要在某個(gè)位置插入一個(gè)li元素，但沒有給li上加key，那么在進(jìn)行運(yùn)算的時(shí)候，就會(huì)將所有l(wèi)i元素重新渲染一遍，但是如果有key，那么它就會(huì)按照key一一比對li元素，只需要?jiǎng)?chuàng)建新的li元素，插入即可，不需要對其他元素進(jìn)行修改和重新渲染。
key也不能是li元素的index，因?yàn)榧僭O(shè)我們給數(shù)組前插入一個(gè)新元素，它的下標(biāo)是0，那么和原來的第一個(gè)元素重復(fù)了，整個(gè)數(shù)組的key都發(fā)生了改變，這樣就跟沒有key的情況一樣了。

20.為什么vue3不繼續(xù)用$set？?
$set的作用：在vue2.0中：使用對象和數(shù)組來定義數(shù)據(jù)，當(dāng)需要向?qū)ο蠡驍?shù)組中新增一個(gè)屬性或元素，并希望它在更新 View 時(shí)響應(yīng)式地更新，就需要使用 $set方法來完成。
vue2是用object.definedProperty來實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的，無法監(jiān)聽深層數(shù)據(jù)的變化。

Vue3 中使用Proxy對數(shù)據(jù)代理通過ref和reactive將值和對象類型變?yōu)轫憫?yīng)式對象，這樣對它的修改和添加就能被vue捕獲到，從而實(shí)現(xiàn)頁面的自動(dòng)刷新。

參考官網(wǎng)響應(yīng)式基礎(chǔ)

21.vue路由中的history和hash的區(qū)別??
地址欄帶不帶"#"號
hash：http://localhost:8080/#/
history:http://localhost:8080/

都是利用瀏覽器的兩種特性實(shí)現(xiàn)前端路由
history是利用瀏覽歷史記錄棧的API實(shí)現(xiàn)
hash是監(jiān)聽location對象hash值變化事件來實(shí)現(xiàn)

相同的url
history會(huì)觸發(fā)添加到瀏覽器歷史記錄棧中，hash不會(huì)觸發(fā)，
history需要后端配合，如果后端不配合刷新頁面會(huì)出現(xiàn)404，hash不需要

hashRouter原理：通過window.onhashchange獲取url中hash值
historyRouter原理：通過history.pushState,使用它做頁面跳轉(zhuǎn)不會(huì)觸發(fā)頁面刷新，使用window.onpopstate監(jiān)聽瀏覽器的前進(jìn)和后退

詳情可以看官網(wǎng)不同歷史模式|Vue Router

?參考：

???????

前端面試題（附答案）完善中……_Jet_closer_burning的博客-CSDN博客文章來源地址http://www.zghlxwxcb.cn/news/detail-491306.html

到了這里，關(guān)于2023年Vue3前端面試題考點(diǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！