?VNode hooks

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

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

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

例如：

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

需要注意的是，這些鉤子向回調(diào)函數(shù)傳遞一些參數(shù)。除了onVnodeBeforeUpdate和onVnodeUpdated?傳遞兩個(gè)參數(shù)，即當(dāng)前的VNode?和之前的VNode?，其它只傳遞一個(gè)參數(shù)，即當(dāng)前的VNode。

Debugging hooks

我們都知道Vue為我們提供的生命周期鉤子。但你可能不知道，Vue3 同時(shí)也給了我們兩個(gè)鉤子，可以用于調(diào)試的？它們是：

• onRenderTracked
• onRenderTriggered

當(dāng)響應(yīng)式依賴(lài)的變更觸發(fā)了組件渲染時(shí)會(huì)調(diào)用 onRenderTracked

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

const count = ref(0)
const count2 = ref(0)

// 這里被調(diào)用兩次，一次用于計(jì)數(shù)，一次用于計(jì)數(shù)2
onRenderTracked((event) => {
    console.log(event)
})
</script>

注冊(cè)一個(gè)調(diào)試鉤子，當(dāng)響應(yīng)式依賴(lài)的變更觸發(fā)了組件渲染時(shí)會(huì)調(diào)用 onRenderTriggered:

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

const count = ref(0)

// 當(dāng)我們更新 count 時(shí)，它將被調(diào)用
onRenderTriggered((event) => {
    debugger
})
</script>

從子組件暴露插槽

有時(shí)，我們使用第三方組件時(shí)，會(huì)把它的實(shí)現(xiàn)包裝在我們自定義組件中。這是一個(gè)很好的做法和可擴(kuò)展的解決方案，但這樣一來(lái)，第三方組件的插槽就會(huì)丟失，下面方法可以將它們的插槽暴露在父組件中：

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>

現(xiàn)在每個(gè)使用WrapperComponent的組件都可以使用第三方組件的插槽。

多個(gè)根節(jié)點(diǎn)的子組件不能從父范圍的樣式設(shè)置樣式

在 Vue3 中，我們可以使用多根組件了，這很好，但我遇到了一個(gè)設(shè)計(jì)限制。假設(shè)我我們有一個(gè)子組件：

<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>
// 沒(méi)有辦法為 MyChildComponent 的 p 標(biāo)簽設(shè)置樣式。
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>

沒(méi)有辦法從多根父組的scoped style?中為子組件的p標(biāo)簽添加樣式。

簡(jiǎn)而言之，具有多個(gè)根節(jié)點(diǎn)的子組件不能從父范圍的樣式設(shè)置樣式

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

但如果你就想使用兩個(gè)根組件，那么可以使用：

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

因?yàn)槲覀冊(cè)谶@里指定的是一個(gè)類(lèi)，所以多根子組件必須顯式指定屬性失效行為。

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

#main-nav > li {}與.my-li { color: red }相比，速度會(huì)慢很多倍。來(lái)自文檔:

由于瀏覽器呈現(xiàn)各種CSS選擇器的方式，p {color: red}?在限定作用域時(shí)(即與屬性選擇器結(jié)合時(shí))會(huì)慢很多倍。如果使用類(lèi)或id代替，例如.example {color: red}，則實(shí)際上消除了這種性能影響。

布爾運(yùn)算

在 Vue2 或 Vue3 的早期版本中，對(duì)于具有布爾類(lèi)型的 props，我們有不同的行為，取決于順序。

第一種情況:

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

第二種情況:

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

不僅如此，如果像這樣傳參：

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

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

這有點(diǎn)令人困惑和不一致。幸運(yùn)的是，在Vue3中，我們有了一種一致且可預(yù)測(cè)的新行為: 無(wú)論順序如何，都將采用布爾的行為，也就是第二種情況。所以：

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>

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

地址：https://github.com/vuejs/core/issues/4010

最后，謝謝大家的閱讀。

來(lái)源：https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml