建站
咨詢
售后
建站咨詢
新聞中心
?VNode hooks
在每個組件或HTML標簽上，我們可以使用一些特殊的（文檔沒寫的）鉤子作為事件監(jiān)聽器。這些鉤子有：
- onVnodeBeforeMount
- onVnodeMounted
- onVnodeBeforeUpdate
- onVnodeUpdated
- onVnodeBeforeUnmount
- onVnodeUnmounted
我主要是在組件上使用onVnodeMounted?，當需要在組件掛載時執(zhí)行一些代碼，或者在更新時使用onVnodeUpdated進行調試，可以確定的是所有這些鉤子都能在某些情況下派上用場。
例如：
{{ count }}
需要注意的是，這些鉤子向回調函數傳遞一些參數。除了onVnodeBeforeUpdate和onVnodeUpdated?傳遞兩個參數，即當前的VNode?和之前的VNode?，其它只傳遞一個參數，即當前的VNode。
Debugging hooks
我們都知道Vue為我們提供的生命周期鉤子。但你可能不知道，Vue3 同時也給了我們兩個鉤子，可以用于調試的？它們是：
- onRenderTracked
- onRenderTriggered
當響應式依賴的變更觸發(fā)了組件渲染時會調用 onRenderTracked
注冊一個調試鉤子，當響應式依賴的變更觸發(fā)了組件渲染時會調用 onRenderTriggered:
從子組件暴露插槽
有時，我們使用第三方組件時，會把它的實現(xiàn)包裝在我們自定義組件中。這是一個很好的做法和可擴展的解決方案，但這樣一來，第三方組件的插槽就會丟失，下面方法可以將它們的插槽暴露在父組件中：
WrapperComponent.vue
現(xiàn)在每個使用WrapperComponent的組件都可以使用第三方組件的插槽。
多個根節(jié)點的子組件不能從父范圍的樣式設置樣式
在 Vue3 中，我們可以使用多根組件了，這很好，但我遇到了一個設計限制。假設我我們有一個子組件：
First p
Second p
還有父組件：
My awesome component
沒有辦法從多根父組的scoped style?中為子組件的p標簽添加樣式。
簡而言之，具有多個根節(jié)點的子組件不能從父范圍的樣式設置樣式
解決這個問題的最好辦法是包裹父或子組件（或兩者），這樣我們就只有一個根元素了。
但如果你就想使用兩個根組件，那么可以使用：
把 scoped 去掉：
使用 css module:
My awesome component
因為我們在這里指定的是一個類，所以多根子組件必須顯式指定屬性失效行為。
使用CSS選擇器時要小心
#main-nav > li {}與.my-li { color: red }相比，速度會慢很多倍。來自文檔:
由于瀏覽器呈現(xiàn)各種CSS選擇器的方式，p {color: red}?在限定作用域時(即與屬性選擇器結合時)會慢很多倍。如果使用類或id代替，例如.example {color: red}，則實際上消除了這種性能影響。
布爾運算
在 Vue2 或 Vue3 的早期版本中，對于具有布爾類型的 props，我們有不同的行為，取決于順序。
第一種情況:
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}第二種情況:
props: {
hoverColor: [Boolean, String] // <- defaults to false
}不僅如此，如果像這樣傳參：
在第一種情況下，它將是一個空字符串''?。在第二種情況下，它是 true。
這有點令人困惑和不一致。幸運的是，在Vue3中，我們有了一種一致且可預測的新行為: 無論順序如何，都將采用布爾的行為，也就是第二種情況。所以：
hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
在 v-for 中使用 ref,不能保證順序
在下面的代碼中：
{{ item }}
我們在列表數組上循環(huán)，并創(chuàng)建 itemRefs 數組。itemRefs不保證與列表數組有相同的順序。如果你想了解更多這方面的信息，你可以閱讀這個issue。
地址：https://github.com/vuejs/core/issues/4010
最后，謝謝大家的閱讀。
來源：https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml
名稱欄目：保證你不知道的Vue3技巧
分享網址：http://www.dlmjj.cn/article/codsjoi.html
