vue3從2022年9月正式發(fā)布以來，它在源碼、性能、語法API方面都做了很大的優(yōu)化，如果你想要學習Vue的話，可以從今天這篇文章內(nèi)容開始學起來，在這篇文章中，我跟大家分享了7個關(guān)于Vue3的開發(fā)技巧，希望對你有用。

我們現(xiàn)在開始吧。

1.VNode 鉤子

在每個組件或html標簽上，我們可以使用一些特殊的（文檔沒寫的）鉤子作為事件監(jiān)聽器。這些鉤子有：

• onVnodeBeforeMount
• onVnodeMounted
• onVnodeBeforeUpdate
• onVnodeUpdated
• onVnodeBeforeUnmount
• onVnodeUnmounted

我主要是在組件上使用onVnodeMounted，當需要在組件掛載時執(zhí)行一些代碼，或者在更新時使用onVnodeUpdated進行調(diào)試，可以確定的是所有這些鉤子都能在某些情況下派上用場。

<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>

例子如下：

應該注意的是，這些掛鉤將一些參數(shù)傳遞給回調(diào)函數(shù)。它們只傳遞一個參數(shù)，即當前 VNode，除了onVnodeBeforeUpdate傳遞onVnodeUpdated兩個參數(shù)，當前 VNode 和前一個 VNode。

2.調(diào)試掛鉤

我們都知道 Vue 為我們提供的生命周期鉤子。但是您知道 Vue 3 為我們提供了兩個可用于調(diào)試目的的鉤子嗎？他們是：?

• onRenderTracked
• onRenderTriggered?

onRenderTracked為已跟蹤的每個反應性依賴項調(diào)用。

<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當我們觸發(fā)反應性更新時被調(diào)用，或者如文檔所說：“當反應性依賴觸發(fā)組件的渲染效果重新運行時”。

<script setup>
import { ref, onRenderTriggered } from 'vue'

const count = ref(0)

// It will be called when we update count
onRenderTriggered((event) => {
    debugger
})
</script>

3.從子組件公開插槽

如果您使用第三方組件，您可能會將其實現(xiàn)包裝在您自己的“包裝器”組件中。這是一個很好的實踐和可擴展的解決方案，但那樣的話，第三方組件的插槽就會丟失，我們應該找到一種方法將它們暴露給父組件：

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>

現(xiàn)在每個使用的組件都WrapperComponent可以使用ThirdPartyComponent的插槽。

4.作用域樣式和多根節(jié)點不能很好地協(xié)同工作

在 Vue 3 中，我們終于可以擁有不止“一個根節(jié)點”的組件。這很好，但我個人在這樣做時遇到了設(shè)計限制。假設(shè)我們有一個子組件：

<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>

無法從多根父組件的作用域樣式設(shè)置子組件的 p 標簽的樣式。

所以簡而言之，一個多根組件，不能使用作用域樣式來定位多根子組件的樣式。

解決這個問題的最好方法是包裝父組件或子組件（或兩者），這樣我們就只有一個根元素。

但是如果你絕對需要兩者都有多根節(jié)點，你可以：

• 使用非作用域樣式

<style>
.my-p { color: red; }
</style>

• 使用 css 模塊

<template>
    <h1>My awesome component</h1>
    <MyChildComponent :class="$style.trick" />
</template>

<style module>
.trick {
    color: red;
}
</style>

既然我們在這里指定了一個類，那么多根子組件就得顯式指定屬性 fallthrough 行為。

如果你想要我的意見，除非你絕對需要一個多根節(jié)點組件，否則請使用單個根節(jié)點并且根本不要處理這個設(shè)計限制。

5.使用 CSS 選擇器時要小心

#main-nav > li {}將比 . 慢很多倍.my-li { color: red }。從文檔：

由于瀏覽器呈現(xiàn)各種 CSS 選擇器的方式，p { color: red } 在范圍內(nèi)（即與屬性選擇器結(jié)合使用時）會慢很多倍。如果您改用類或 ID，例如在 .example { color: red } 中，那么您幾乎可以消除性能損失。

如果您想更深入地研究這個主題，我強烈建議您閱讀Efficiently Rendering CSS 。

6.布爾轉(zhuǎn)換

在 Vue 2 或 Vue 3 的早期版本中，對于具有布爾類型的道具，我們根據(jù)順序有不同的行為：

第一種情況：

props: {
  hoverColor: [String, Boolean] // <- defaults to ''
}

第二種情況：

props: {
  hoverColor: [Boolean, String] // <- defaults to false
}

不僅如此，如果你像這樣傳遞 prop：

<my-component hover-color></my-component>

在第一種情況下，它將是一個空字符串''。在第二種情況下，它將是true.

如您所見，這有點混亂和不一致。幸運的是，在 Vue 3 中，我們有一個一致且可預測的新行為：

Boolean無論類型出現(xiàn)順序如何，行為都將適用。

所以：

hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false

7.帶有 v-for 的模板引用 - 不能保證順序

記住這個，這樣你就不會浪費數(shù)小時的調(diào)試時間來弄清楚發(fā)生了什么

在下面的代碼中：

<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>

我們在列表數(shù)組上循環(huán)，并創(chuàng)建 itemRefs 數(shù)組。itemRefs不保證與列表數(shù)組有相同的順序。如果你想了解更多這方面的信息，你可以閱讀這個issue。

總結(jié)

以上就是我今天跟你分享的7個關(guān)于Vue3的技巧，希望這些技巧對你有所幫助。

感謝你的閱讀。