?VNode hooks
在每個組件或HTML標簽上，我們可以使用一些特殊的（文檔沒寫的）鉤子作為事件監聽器。這些鉤子有：
- onVnodeBeforeMount
- onVnodeMounted
- onVnodeBeforeUpdate
- onVnodeUpdated
- onVnodeBeforeUnmount
- onVnodeUnmounted
我主要是在組件上使用onVnodeMounted?，當需要在組件掛載時執行一些代碼，或者在更新時使用onVnodeUpdated進行調試，可以確定的是所有這些鉤子都能在某些情況下派上用場。
例如：
<script setup>
import { ref } from 'vue'
const count = ref(0)
function onMyComponentMounted() {}
function divThatDisplaysCountWasUpdated() {}
</script>
<template>
<MyComponent @vnodeMounted="onMyComponentMounted" />
<div @vnodeUpdated="divThatDisplaysCountWasUpdated">{{ count }}</div>
</template>
需要注意的是，這些鉤子向回調函數傳遞一些參數。除了onVnodeBeforeUpdate和onVnodeUpdated?傳遞兩個參數，即當前的VNode?和之前的VNode?，其它只傳遞一個參數，即當前的VNode。
Debugging hooks
我們都知道Vue為我們提供的生命周期鉤子。但你可能不知道，Vue3 同時也給了我們兩個鉤子，可以用于調試的？它們是：
- onRenderTracked
- onRenderTriggered
當響應式依賴的變更觸發了組件渲染時會調用 onRenderTracked
<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)
const count2 = ref(0)
// 這里被調用兩次，一次用于計數，一次用于計數2
onRenderTracked((event) => {
console.log(event)
})
</script>
注冊一個調試鉤子，當響應式依賴的變更觸發了組件渲染時會調用 onRenderTriggered:
<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)
// 當我們更新 count 時，它將被調用
onRenderTriggered((event) => {
debugger
})
</script>
從子組件暴露插槽
有時，我們使用第三方組件時，會把它的實現包裝在我們自定義組件中。這是一個很好的做法和可擴展的解決方案，但這樣一來，第三方組件的插槽就會丟失，下面方法可以將它們的插槽暴露在父組件中：
WrapperComponent.vue
<template>
<div class="wrapper-of-third-party-component">
<ThirdPartyComponent v-bind="$attrs">
<!-- 暴露第三方組件的插槽 -->
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}"></slot>
</template>
</ThirdPartyComponent>
</div>
</template>
現在每個使用WrapperComponent的組件都可以使用第三方組件的插槽。
多個根節點的子組件不能從父范圍的樣式設置樣式
在 Vue3 中，我們可以使用多根組件了，這很好，但我遇到了一個設計限制。假設我我們有一個子組件：
<template>
<p class="my-p">First p</p>
<p class="my-p">Second p</p>
</template>
還有父組件：
<template>
<h1>My awesome component</h1>
<MyChildComponent />
</template>
<style scoped>
// 沒有辦法為 MyChildComponent 的 p 標簽設置樣式。
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>
沒有辦法從多根父組的scoped style?中為子組件的p標簽添加樣式。
簡而言之，具有多個根節點的子組件不能從父范圍的樣式設置樣式
解決這個問題的最好辦法是包裹父或子組件（或兩者），這樣我們就只有一個根元素了。
但如果你就想使用兩個根組件，那么可以使用：
把 scoped 去掉：
<style>
.my-p { color: red; }
</style>
使用 css module:
<template>
<h1>My awesome component</h1>
<MyChildComponent :class="$style.trick" />
</template>
<style module>
.trick {
color: red;
}
</style>
因為我們在這里指定的是一個類，所以多根子組件必須顯式指定屬性失效行為。
使用CSS選擇器時要小心
#main-nav > li {}與.my-li { color: red }相比，速度會慢很多倍。來自文檔:
由于瀏覽器呈現各種CSS選擇器的方式，p {color: red}?在限定作用域時(即與屬性選擇器結合時)會慢很多倍。如果使用類或id代替，例如.example {color: red}，則實際上消除了這種性能影響。
布爾運算
在 Vue2 或 Vue3 的早期版本中，對于具有布爾類型的 props，我們有不同的行為，取決于順序。
第一種情況:
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}第二種情況:
props: {
hoverColor: [Boolean, String] // <- defaults to false
}不僅如此，如果像這樣傳參：
<my-component hover-color></my-component>
在第一種情況下，它將是一個空字符串''?。在第二種情況下，它是 true。
這有點令人困惑和不一致。幸運的是，在Vue3中，我們有了一種一致且可預測的新行為: 無論順序如何，都將采用布爾的行為，也就是第二種情況。所以：
hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
在 v-for 中使用 ref,不能保證順序
在下面的代碼中：
<script setup>
import { ref } from "vue";
const list = ref([1, 2, 3]);
const itemRefs = ref([]);
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs" :key="item">
{{ item }}
</li>
</ul>
</template>
我們在列表數組上循環，并創建 itemRefs 數組。itemRefs不保證與列表數組有相同的順序。如果你想了解更多這方面的信息，你可以閱讀這個issue。
地址：https://github.com/vuejs/core/issues/4010
最后，謝謝大家的閱讀。
來源：https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml
