7个你需要知道的Vue3技巧

01.VNode 钩子

在每个组件或html标签上，我们可以使用一些特殊的（文档没写的）钩子作为事件监听器。这些钩子有：

onVnodeBeforeMount
onVnodeMounted
onVnodeBeforeUpdate
onVnodeUpdated
onVnodeBeforeUnmount
onVnodeUnmounted
我主要是在组件上使用onVnodeMounted，当需要在组件挂载时执行一些代码，或者在更新时使用onVnodeUpdated进行调试，可以确定的是所有这些钩子都能在某些情况下派上用场。例子如下：

02.调试挂钩

我们都知道 Vue 为我们提供的生命周期钩子。但是您知道 Vue 3 为我们提供了两个可用于调试目的的钩子吗？他们是：

onRenderTracked
onRenderTriggered
onRenderTracked为已跟踪的每个反应性依赖项调用。

onRenderTriggered当我们触发反应性更新时被调用，或者如文档所说：“当反应性依赖触发组件的渲染效果重新运行时”。

03.从子组件公开插槽

如果您使用第三方组件，您可能会将其实现包装在您自己的“包装器”组件中。这是一个很好的实践和可扩展的解决方案，但那样的话，第三方组件的插槽就会丢失，我们应该找到一种方法将它们暴露给父组件：

WrapperComponent.vue

    <!-- Expose the slots of the third-party component -->
    <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"></slot>
    </template>

</ThirdPartyComponent>

04.作用域样式和多根节点不能很好地协同工作

在 Vue 3 中，我们终于可以拥有不止“一个根节点”的组件。这很好，但我个人在这样做时遇到了设计限制。假设我们有一个子组件：

First p

Second p

My awesome component

无法从多根父组件的作用域样式设置子组件的 p 标签的样式。

所以简而言之，一个多根组件，不能使用作用域样式来定位多根子组件的样式。

解决这个问题的最好方法是包装父组件或子组件（或两者），这样我们就只有一个根元素。但是如果你绝对需要两者都有多根节点，你可以：

使用非作用域样式

使用 css 模块

My awesome component

既然我们在这里指定了一个类，那么多根子组件就得显式指定属性 fallthrough 行为。如果你想要我的意见，除非你绝对需要一个多根节点组件，否则请使用单个根节点并且根本不要处理这个设计限制。

05.使用 CSS 选择器时要小心

#main-nav > li {}将比 . 慢很多倍.my-li { color: red }。从文档：

由于浏览器呈现各种 CSS 选择器的方式，p { color: red } 在范围内（即与属性选择器结合使用时）会慢很多倍。如果您改用类或 ID，例如在 .example { color: red } 中，那么您几乎可以消除性能损失。

如果您想更深入地研究这个主题，我强烈建议您阅读Efficiently Rendering CSS 。

06.布尔转换

在 Vue 2 或 Vue 3 的早期版本中，对于具有布尔类型的道具，我们根据顺序有不同的行为：

第一种情况：

props: {
hoverColor: [String, Boolean] // <- defaults to ‘’
}
第二种情况：

props: {
hoverColor: [Boolean, String] // <- defaults to false
}
不仅如此，如果你像这样传递 prop：

在第一种情况下，它将是一个空字符串’'。在第二种情况下，它将是true.

如您所见，这有点混乱和不一致。幸运的是，在 Vue 3 中，我们有一个一致且可预测的新行为：

Boolean无论类型出现顺序如何，行为都将适用。

所以：

hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
07.带有 v-for 的模板引用 - 不能保证顺序

记住这个，这样你就不会浪费数小时的调试时间来弄清楚发生了什么

在下面的代码中：

• { { item }}