vue3從2022年9月正式發布以來，它在源碼、性能、語法API方面都做了很大的優化，如果你想要學習Vue的話，可以從今天這篇文章內容開始學起來，在這篇文章中，我跟大家分享了7個關于Vue3的開發技巧，希望對你有用。
我們現在開始吧。
1.VNode 鉤子
在每個組件或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>
例子如下：
應該注意的是，這些掛鉤將一些參數傳遞給回調函數。它們只傳遞一個參數，即當前 VNode，除了onVnodeBeforeUpdate傳遞onVnodeUpdated兩個參數，當前 VNode 和前一個 VNode。
2.調試掛鉤
我們都知道 Vue 為我們提供的生命周期鉤子。但是您知道 Vue 3 為我們提供了兩個可用于調試目的的鉤子嗎？他們是：?
- onRenderTracked
- onRenderTriggered?
onRenderTracked為已跟蹤的每個反應性依賴項調用。
<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)
const count2 = ref(0)
// It will be called twice, once for count and once for count2
onRenderTracked((event) => {
console.log(event)
})
</script>
onRenderTriggered當我們觸發反應性更新時被調用，或者如文檔所說：“當反應性依賴觸發組件的渲染效果重新運行時”。
<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)
// It will be called when we update count
onRenderTriggered((event) => {
debugger
})
</script>
3.從子組件公開插槽
如果您使用第三方組件，您可能會將其實現包裝在您自己的“包裝器”組件中。這是一個很好的實踐和可擴展的解決方案，但那樣的話，第三方組件的插槽就會丟失，我們應該找到一種方法將它們暴露給父組件：
WrapperComponent.vue
<template>
<div class="wrapper-of-third-party-component">
<ThirdPartyComponent v-bind="$attrs">
<!-- Expose the slots of the third-party component -->
<template v-for="(_, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}"></slot>
</template>
</ThirdPartyComponent>
</div>
</template>
現在每個使用的組件都WrapperComponent可以使用ThirdPartyComponent的插槽。
4.作用域樣式和多根節點不能很好地協同工作
在 Vue 3 中，我們終于可以擁有不止“一個根節點”的組件。這很好，但我個人在這樣做時遇到了設計限制。假設我們有一個子組件：
<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>
// There is no way to style the p tags of MyChildComponent
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>
無法從多根父組件的作用域樣式設置子組件的 p 標簽的樣式。
所以簡而言之，一個多根組件，不能使用作用域樣式來定位多根子組件的樣式。
解決這個問題的最好方法是包裝父組件或子組件（或兩者），這樣我們就只有一個根元素。
但是如果你絕對需要兩者都有多根節點，你可以：
<style>
.my-p { color: red; }
</style>
<template>
<h1>My awesome component</h1>
<MyChildComponent :class="$style.trick" />
</template>
<style module>
.trick {
color: red;
}
</style>
既然我們在這里指定了一個類，那么多根子組件就得顯式指定屬性 fallthrough 行為。
如果你想要我的意見，除非你絕對需要一個多根節點組件，否則請使用單個根節點并且根本不要處理這個設計限制。
5.使用 CSS 選擇器時要小心
#main-nav > li {}將比 . 慢很多倍.my-li { color: red }。從文檔：
由于瀏覽器呈現各種 CSS 選擇器的方式，p { color: red } 在范圍內（即與屬性選擇器結合使用時）會慢很多倍。如果您改用類或 ID，例如在 .example { color: red } 中，那么您幾乎可以消除性能損失。
如果您想更深入地研究這個主題，我強烈建議您閱讀Efficiently Rendering CSS 。
6.布爾轉換
在 Vue 2 或 Vue 3 的早期版本中，對于具有布爾類型的道具，我們根據順序有不同的行為：
第一種情況：
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}第二種情況：
props: {
hoverColor: [Boolean, String] // <- defaults to false
}不僅如此，如果你像這樣傳遞 prop：
<my-component hover-color></my-component>
在第一種情況下，它將是一個空字符串''。在第二種情況下，它將是true.
如您所見，這有點混亂和不一致。幸運的是，在 Vue 3 中，我們有一個一致且可預測的新行為：
Boolean無論類型出現順序如何，行為都將適用。
所以：
hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
7.帶有 v-for 的模板引用 - 不能保證順序
記住這個，這樣你就不會浪費數小時的調試時間來弄清楚發生了什么
在下面的代碼中：
<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。
總結
以上就是我今天跟你分享的7個關于Vue3的技巧，希望這些技巧對你有所幫助。
感謝你的閱讀。
