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

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

1.VNode 鉤子

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

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

我主要是在組件上使用onVnodeMounted，當(dāng)需要在組件掛載時(shí)執(zhí)行一些代碼，或者在更新時(shí)使用onVnodeUpdated進(jìn)行調(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>

例子如下：

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

2.調(diào)試掛鉤

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

• onRenderTracked
• onRenderTriggered?

onRenderTracked為已跟蹤的每個(gè)反應(yīng)性依賴項(xiàng)調(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當(dāng)我們觸發(fā)反應(yīng)性更新時(shí)被調(diào)用，或者如文檔所說：“當(dāng)反應(yīng)性依賴觸發(fā)組件的渲染效果重新運(yùn)行時(shí)”。

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

const count = ref(0)

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

3.從子組件公開插槽

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

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)在每個(gè)使用的組件都WrapperComponent可以使用ThirdPartyComponent的插槽。

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

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

<template>
  <p class="my-p">First p</p>
  <p class="my-p">Second p</p>
</template>

和一個(gè)父組件：

<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 標(biāo)簽的樣式。

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

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

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

• 使用非作用域樣式

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

• 使用 css 模塊

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

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

既然我們?cè)谶@里指定了一個(gè)類，那么多根子組件就得顯式指定屬性 fallthrough 行為。

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

5.使用 CSS 選擇器時(shí)要小心

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

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

如果您想更深入地研究這個(gè)主題，我強(qiáng)烈建議您閱讀Efficiently Rendering CSS 。

6.布爾轉(zhuǎn)換

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

第一種情況：

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

第二種情況：

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

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

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

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

如您所見，這有點(diǎn)混亂和不一致。幸運(yùn)的是，在 Vue 3 中，我們有一個(gè)一致且可預(yù)測的新行為：

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

所以：

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

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

記住這個(gè)，這樣你就不會(huì)浪費(fèi)數(shù)小時(shí)的調(diào)試時(shí)間來弄清楚發(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>

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

總結(jié)

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

感謝你的閱讀。