- onVnodeBeforeMount
- onVnodeMounted
- onVnodeBeforeUpdate
- onVnodeUpdated
- onVnodeBeforeUnmount
- onVnodeUnmounted
我主要是在组件上使用onVnodeMounted，当需要在组件挂载时执行一些代码，或者在更新时使用onVnodeUpdated进行调试，可以确定的是所有这些钩子都能在某些情况下派上用场。
例如：
<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>
需要注意的是，这些钩子向回调函数传递一些参数。除了onVnodeBeforeUpdate和onVnodeUpdated传递两个参数，即当前的VNode和之前的VNode，其它只传递一个参数，即当前的VNode。
Debugging hooks
我们都知道Vue为我们提供的生命周期钩子。但你可能不知道，Vue3 同时也给了我们两个钩子，可以用于调试的？它们是：
- onRenderTracked
- onRenderTriggered
当响应式依赖的变更触发了组件渲染时会调用 onRenderTracked
<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)
const count2 = ref(0)
// 这里被调用两次，一次用于计数，一次用于计数2
onRenderTracked((event) => {
console.log(event)
})
script>
注册一个调试钩子，当响应式依赖的变更触发了组件渲染时会调用 onRenderTriggered:
<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)
// 当我们更新 count 时，它将被调用
onRenderTriggered((event) => {
debugger
})
script>
从子组件暴露插槽
有时，我们使用第三方组件时，会把它的实现包装在我们自定义组件中。这是一个很好的做法和可扩展的解决方案，但这样一来，第三方组件的插槽就会丢失，下面方法可以将它们的插槽暴露在父组件中：
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>
现在每个使用WrapperComponent的组件都可以使用第三方组件的插槽。
多个根节点的子组件不能从父范围的样式设置样式
在 Vue3 中，我们可以使用多根组件了，这很好，但我遇到了一个设计限制。假设我我们有一个子组件：
<template>
<p class="my-p">First pp>
<p class="my-p">Second pp>
template>
还有父组件：
<template>
<h1>My awesome componenth1>
<MyChildComponent />
template>
<style scoped>
// 没有办法为 MyChildComponent 的 p 标签设置样式。
.my-p { color: red; }
:deep(.my-p) { color: red; }
style>
没有办法从多根父组的scoped style中为子组件的p标签添加样式。
简而言之，具有多个根节点的子组件不能从父范围的样式设置样式
解决这个问题的最好办法是包裹父或子组件（或两者），这样我们就只有一个根元素了。
但如果你就想使用两个根组件，那么可以使用：
把 scoped 去掉：
<style>
.my-p { color: red; }
style>
使用 css module:
<template>
<h1>My awesome componenth1>
<MyChildComponent :class="$style.trick" />
template>
<style module>
.trick {
color: red;
}
style>
因为我们在这里指定的是一个类，所以多根子组件必须显式指定属性失效行为。
使用CSS选择器时要小心
#main-nav > li {}与.my-li { color: red }相比，速度会慢很多倍。来自文档:
由于浏览器呈现各种CSS选择器的方式，p {color: red}在限定作用域时(即与属性选择器结合时)会慢很多倍。如果使用类或id代替，例如.example {color: red}，则实际上消除了这种性能影响。
布尔运算
在 Vue2 或 Vue3 的早期版本中，对于具有布尔类型的 props，我们有不同的行为，取决于顺序。
第一种情况:
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}第二种情况:
props: {
hoverColor: [Boolean, String] // <- defaults to false
}不仅如此，如果像这样传参：
<my-component hover-color>my-component>
在第一种情况下，它将是一个空字符串''。在第二种情况下，它是 true。
这有点令人困惑和不一致。幸运的是，在Vue3中，我们有了一种一致且可预测的新行为: 无论顺序如何，都将采用布尔的行为，也就是第二种情况。所以：
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>
我们在列表数组上循环，并创建 itemRefs 数组。itemRefs不保证与列表数组有相同的顺序。如果你想了解更多这方面的信息，你可以阅读这个issue。
地址：https://github.com/vuejs/core/issues/4010
最后，谢谢大家的阅读。
来源：https://dev.to/the_one/vue-3-tipstricks-i-guarantee-you-didnt-know-49ml
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
