建站
咨詢
售后
建站咨詢
新聞中心
?VNode hooks
在每個(gè)組件或HTML標(biāo)簽上，我們可以使用一些特殊的（文檔沒寫的）鉤子作為事件監(jiān)聽器。這些鉤子有：
- onVnodeBeforeMount
- onVnodeMounted
- onVnodeBeforeUpdate
- onVnodeUpdated
- onVnodeBeforeUnmount
- onVnodeUnmounted
我主要是在組件上使用onVnodeMounted?，當(dāng)需要在組件掛載時(shí)執(zhí)行一些代碼，或者在更新時(shí)使用onVnodeUpdated進(jìn)行調(diào)試，可以確定的是所有這些鉤子都能在某些情況下派上用場(chǎng)。
例如：
{{ count }}
需要注意的是，這些鉤子向回調(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)式依賴的變更觸發(fā)了組件渲染時(shí)會(huì)調(diào)用 onRenderTracked
注冊(cè)一個(gè)調(diào)試鉤子，當(dāng)響應(yīng)式依賴的變更觸發(fā)了組件渲染時(shí)會(huì)調(diào)用 onRenderTriggered:
從子組件暴露插槽
有時(shí)，我們使用第三方組件時(shí)，會(huì)把它的實(shí)現(xiàn)包裝在我們自定義組件中。這是一個(gè)很好的做法和可擴(kuò)展的解決方案，但這樣一來(lái)，第三方組件的插槽就會(huì)丟失，下面方法可以將它們的插槽暴露在父組件中：
WrapperComponent.vue
現(xiàn)在每個(gè)使用WrapperComponent的組件都可以使用第三方組件的插槽。
多個(gè)根節(jié)點(diǎn)的子組件不能從父范圍的樣式設(shè)置樣式
在 Vue3 中，我們可以使用多根組件了，這很好，但我遇到了一個(gè)設(shè)計(jì)限制。假設(shè)我我們有一個(gè)子組件：
First p
Second p
還有父組件：
My awesome component
沒有辦法從多根父組的scoped style?中為子組件的p標(biāo)簽添加樣式。
簡(jiǎn)而言之，具有多個(gè)根節(jié)點(diǎn)的子組件不能從父范圍的樣式設(shè)置樣式
解決這個(gè)問題的最好辦法是包裹父或子組件（或兩者），這樣我們就只有一個(gè)根元素了。
但如果你就想使用兩個(gè)根組件，那么可以使用：
把 scoped 去掉：
使用 css module:
My awesome component
因?yàn)槲覀冊(cè)谶@里指定的是一個(gè)類，所以多根子組件必須顯式指定屬性失效行為。
使用CSS選擇器時(shí)要小心
#main-nav > li {}與.my-li { color: red }相比，速度會(huì)慢很多倍。來(lái)自文檔:
由于瀏覽器呈現(xiàn)各種CSS選擇器的方式，p {color: red}?在限定作用域時(shí)(即與屬性選擇器結(jié)合時(shí))會(huì)慢很多倍。如果使用類或id代替，例如.example {color: red}，則實(shí)際上消除了這種性能影響。
布爾運(yùn)算
在 Vue2 或 Vue3 的早期版本中，對(duì)于具有布爾類型的 props，我們有不同的行為，取決于順序。
第一種情況:
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}第二種情況:
props: {
hoverColor: [Boolean, String] // <- defaults to false
}不僅如此，如果像這樣傳參：
在第一種情況下，它將是一個(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,不能保證順序
在下面的代碼中：
{{ item }}
我們?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
新聞名稱：保證你不知道的Vue3技巧
文章網(wǎng)址：http://www.5511xx.com/article/codsjoi.html
