VNode 鉤子

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

• onVnodeBeforeMount

• onVnodeMounted

• onVnodeBeforeUpdate

• onVnodeUpdated

• onVnodeBeforeUnmount

• onVnodeUnmounted

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

例子：

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

調(diào)試掛鉤

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

• onRenderTracked

• onRenderTriggered

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

onRenderTriggered當(dāng)我們觸發(fā)反應(yīng)性更新時被調(diào)用，或者如文檔所說：“當(dāng)反應(yīng)性依賴觸發(fā)組件的渲染效果重新運行時”。

從子組件公開插槽

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

WrapperComponent.vue

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

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

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

和一個父組件：

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

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

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

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

• 使用非作用域樣式

• 使用 css 模塊

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

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

使用 CSS 選擇器時要小心

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

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

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

布爾轉(zhuǎn)換

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

第一種情況：

第二種情況：

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

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

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

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

所以：

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

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

在下面的代碼中：

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