保证你不知道的Vue3技巧

​VNode hooks

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

• onVnodeBeforeMount
• onVnodeMounted
• onVnodeBeforeUpdate
• onVnodeUpdated
• onVnodeBeforeUnmount
• onVnodeUnmounted

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

例如：

需要注意的是，这些钩子向回调函数传递一些参数。除了onVnodeBeforeUpdate和onVnodeUpdated​传递两个参数，即当前的VNode​和之前的VNode​，其它只传递一个参数，即当前的VNode。

Debugging hooks

我们都知道Vue为我们提供的生命周期钩子。但你可能不知道，Vue3 同时也给了我们两个钩子，可以用于调试的？它们是：

• onRenderTracked
• onRenderTriggered

当响应式依赖的变更触发了组件渲染时会调用 onRenderTracked

注册一个调试钩子，当响应式依赖的变更触发了组件渲染时会调用 onRenderTriggered:

从子组件暴露插槽

有时，我们使用第三方组件时，会把它的实现包装在我们自定义组件中。这是一个很好的做法和可扩展的解决方案，但这样一来，第三方组件的插槽就会丢失，下面方法可以将它们的插槽暴露在父组件中：

WrapperComponent.vue

现在每个使用WrapperComponent的组件都可以使用第三方组件的插槽。

多个根节点的子组件不能从父范围的样式设置样式

在 Vue3 中，我们可以使用多根组件了，这很好，但我遇到了一个设计限制。假设我我们有一个子组件：

还有父组件：

没有办法从多根父组的scoped style​中为子组件的p标签添加样式。

简而言之，具有多个根节点的子组件不能从父范围的样式设置样式

解决这个问题的最好办法是包裹父或子组件（或两者），这样我们就只有一个根元素了。

但如果你就想使用两个根组件，那么可以使用：

把 scoped 去掉：

使用 css module:

因为我们在这里指定的是一个类，所以多根子组件必须显式指定属性失效行为。

使用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
}

不仅如此，如果像这样传参：

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

这有点令人困惑和不一致。幸运的是，在Vue3中，我们有了一种一致且可预测的新行为: 无论顺序如何，都将采用布尔的行为，也就是第二种情况。所以：

hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false

在 v-for 中使用 ref,不能保证顺序

在下面的代码中：

我们在列表数组上循环，并创建 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.shufengxianlan.com/qtweb/news20/465020.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联