1. Vue3中的可選鏈運算符（?.）和空值合并運算符（??）是什么牍颈？它們有什么作用至扰？
可選鏈運算符（?.）和空值合并運算符（??）是Vue 3.x中新增的兩種運算符揩晴。
可選鏈運算符（?.）是一種簡化代碼的運算符春哨，它能夠訪問深層次的嵌套對象屬性和方法泌参，而不需要進(jìn)行繁瑣的空值判斷瘟判。如果訪問的屬性或方法不存在，它會返回undefined而不會拋出錯誤震捣。
例如，以下代碼可以通過可選鏈運算符（?.）來避免類型錯誤：
const user = {
name: 'John',
address: {
city: 'New York',
street: null
}
}
const streetName = user.address.street?.name; // undefined
空值合并運算符（??）是一種用于處理null或undefined的運算符。如果對左側(cè)的表達(dá)式進(jìn)行求值，結(jié)果為null或undefined灰署，那么它會返回右側(cè)的表達(dá)式。
例如辜伟，以下代碼可以通過空值合并運算符（??）來設(shè)置默認(rèn)值：
const name = user.name ?? 'Anonymous'; // 'John'
const street = user.address.street?.name ?? 'Main Street'; // 'Main Street'
綜上所述氓侧，可選鏈運算符（?.）和空值合并運算符（??）可以讓我們更方便地處理undefined、null和深層次嵌套的屬性和方法导狡，提高代碼的可讀性和可維護(hù)性。
2. Vue3中處理的組件通信方式有哪些偎痛？
在Vue3中旱捧，可以使用以下幾種方式來處理組件傳值：
Props：通過在父組件中使用
props屬性來向子組件傳遞數(shù)據(jù)。子組件接收props時踩麦，需要在setup()方法中使用props參數(shù)來獲取枚赡。Emit：子組件可以通過
$emit方法向父組件發(fā)送事件。父組件可以使用v-on指令監(jiān)聽子組件發(fā)出的事件谓谦，并在事件處理函數(shù)中獲取子組件傳遞的數(shù)據(jù)贫橙。v-model：使用
v-model指令可以讓父組件通過雙向綁定來修改子組件中的數(shù)據(jù)，同時也可以監(jiān)聽子組件發(fā)出的事件反粥。Refs：可以使用
ref屬性來獲取子組件的引用卢肃，從而直接訪問子組件中的數(shù)據(jù)和方法。Provide/Inject：可以使用
provide和inject來在父組件和其所有子孫組件之間共享數(shù)據(jù)和方法才顿。EventBus：可以使用Vue實例作為事件總線莫湘，在不同的組件中分發(fā)和監(jiān)聽事件。
Vuex/Pinia：狀態(tài)管理工具可以讓應(yīng)用程序中的所有組件共享和管理一個全局狀態(tài)郑气，從而實現(xiàn)組件間的數(shù)據(jù)共享和通信幅垮。其中Vuex是Vue官方提供的狀態(tài)管理庫，而Pinia是一個輕量級的狀態(tài)管理庫尾组。
3. 在vue3的setup方法中忙芒，返回一個對象時，需要注意哪些問題讳侨？返回一個渲染函數(shù)時呵萨，又有哪些注意事項？
在 Vue3 的 setup 方法中爷耀，如果返回一個對象甘桑，則需要注意以下幾點：
返回的對象中的屬性會變成組件實例的響應(yīng)式數(shù)據(jù)，因此需要確保返回的對象屬性和值都是響應(yīng)式數(shù)據(jù)。
如果需要在
setup方法中使用組件實例的this跑杭，可以通過getCurrentInstance()方法獲取當(dāng)前組件實例铆帽。返回的對象中也可以包含一些函數(shù)或計算屬性，它們也可以訪問到響應(yīng)式數(shù)據(jù)德谅。
舉個例子：
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`;
});
const firstName = ref('Tom');
const lastName = ref('Smith');
return {
count,
increment,
fullName,
firstName,
lastName
};
}
};
在上面的例子中爹橱，返回的對象包含了一個響應(yīng)式數(shù)據(jù) count 和一個修改它的方法 increment，還有一個計算屬性 fullName 和兩個其它的響應(yīng)式數(shù)據(jù) firstName 和 lastName窄做。
如果返回一個渲染函數(shù)愧驱，則需要注意以下幾點：
渲染函數(shù)中需要返回一個 VNode 對象，可以使用
h函數(shù)創(chuàng)建椭盏。可以訪問到響應(yīng)式數(shù)據(jù)和方法组砚。
不能訪問到組件實例的
this。
舉個例子：
import { ref, h } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return () => {
return h('div', {}, [
h('p', `Count: ${count.value}`),
h('button', { onClick: increment }, 'Increment')
]);
};
}
};
在上面的例子中掏颊，返回一個渲染函數(shù)糟红，根據(jù) count 的值渲染一個包含它和一個按鈕的 div 元素。其中乌叶，increment 方法可以在按鈕的 onClick 事件中使用盆偿。
4. 在Vue3中如何實現(xiàn)遞歸組件？
在Vue 3.0中實現(xiàn)遞歸組件有兩種方法：
- 使用template模板定義遞歸組件
可以在組件中使用template模板以遞歸的方式引用組件自身准浴。例如：
<template>
<div>
<div>{{name}}</div>
<div v-if="children">
<my-component v-for="(child, index) in children" :key="index" :name="child.name" :children="child.children" />
</div>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
name: String,
children: Array
},
}
</script>
- 使用render函數(shù)定義遞歸組件
可以使用render函數(shù)遞歸渲染組件并引用組件自身事扭。例如：
<script>
export default {
name: 'MyComponent',
props: {
name: String,
children: Array
},
render() {
return h(
'div',
[
h('div', this.name),
this.children && h(
'div',
this.children.map(child => {
return h(MyComponent, { props: child })
})
)
]
)
}
}
</script>
5. Vue3中的虛擬DOM是如何工作的？它和Vue2相比有哪些不同乐横？
Vue3的虛擬DOM和Vue2的虛擬DOM實現(xiàn)的基本原理是相同的求橄，都是通過將DOM樹映射到JavaScript對象上，然后比較新舊虛擬DOM來確定需要更新的元素晰奖。不同的是谈撒，Vue3的虛擬DOM引入了一些優(yōu)化措施，使其更加高效匾南。下面是Vue3中虛擬DOM的一些特點：
- Fragment
Vue3中的虛擬DOM支持Fragment啃匿，即可以同時渲染多個根節(jié)點。這樣可以避免在渲染列表等場景下產(chǎn)生多余的包裹節(jié)點蛆楞，提升了性能和渲染效率溯乒。
- 靜態(tài)提升
Vue3中的虛擬DOM引入了靜態(tài)提升的概念，即對于靜態(tài)節(jié)點豹爹，在編譯時會將其提升為全局變量裆悄，這樣可以避免每次渲染時重復(fù)創(chuàng)建相同的靜態(tài)節(jié)點，提升渲染效率臂聋。
- 動態(tài)Props緩存
在Vue3中光稼，動態(tài)Props的值會在首次渲染時緩存或南，避免不必要的重新計算和渲染，提升渲染效率艾君。
- Teleport
Vue3中新增了Teleport組件采够，可以在組件外部渲染內(nèi)容，這個內(nèi)容會被掛在到body下冰垄，可以用于實現(xiàn)彈出框和對話框等場景蹬癌，避免嵌套多余DOM節(jié)點，提升渲染效率虹茶。
總的來說逝薪，Vue3的虛擬DOM改進(jìn)了一些性能瓶頸，提升了渲染效率蝴罪，使得Vue應(yīng)用性能更加出色董济。
6. Vue3的靜態(tài)提升是什么？
Vue3的靜態(tài)提升是基于編譯器優(yōu)化的一種技術(shù)洲炊，其主要原理是將模板中的靜態(tài)節(jié)點在編譯期間進(jìn)行標(biāo)記感局，并將其生成為一段靜態(tài)渲染函數(shù)，這段渲染函數(shù)的執(zhí)行效率更高暂衡，因為它不需要重復(fù)生成和更新靜態(tài)節(jié)點。
具體來說崖瞭，靜態(tài)節(jié)點指的是在組件的渲染過程中不需要進(jìn)行變化的節(jié)點狂巢，比如純文本節(jié)點、靜態(tài)屬性節(jié)點等书聚。在編譯期間唧领，編譯器會根據(jù)模板對靜態(tài)節(jié)點進(jìn)行標(biāo)記，并將其轉(zhuǎn)換為渲染函數(shù)中的靜態(tài)節(jié)點雌续。這些靜態(tài)節(jié)點會在組件初始化時就已經(jīng)生成并保存在緩存中斩个，在渲染過程中直接從緩存中獲取，避免了重復(fù)生成和更新的過程驯杜。
此外受啥，Vue3的編譯器還對動態(tài)節(jié)點進(jìn)行了優(yōu)化，將其轉(zhuǎn)換為更高效的渲染函數(shù)鸽心，在渲染過程中只需要針對動態(tài)節(jié)點進(jìn)行更新滚局，大大提高了組件的渲染效率和性能。
總的來說顽频，Vue3的靜態(tài)提升機(jī)制是基于編譯期間對模板進(jìn)行優(yōu)化的一種技術(shù)藤肢，其主要目的是提高組件的渲染效率，從而提升整個應(yīng)用程序的性能糯景。
舉個例子嘁圈，假設(shè)有如下模板：
<div>
<p class="title">Static Title</p>
<p>{{ dynamicText }}</p>
</div>
在編譯時省骂，Vue3會發(fā)現(xiàn)<p class="title">Static Title</p>是一個靜態(tài)節(jié)點，它的 class 和文本內(nèi)容不會被改變最住，因此這個節(jié)點可以被提前創(chuàng)建钞澳，并存儲在一個常量中。而另一個<p>{{ dynamicText }}</p>是一個動態(tài)節(jié)點温学，每次渲染時內(nèi)容都會被改變略贮，因此它不能被提前創(chuàng)建。
通過靜態(tài)提升仗岖，Vue3可以顯著提高渲染性能逃延，特別是當(dāng)頁面中存在大量靜態(tài)節(jié)點或?qū)傩詴r。
小程序刷題
搜索: zerojs零技術(shù)
