保证你不知道的Vue 3技巧

VNode hooks

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

• 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 p</p><p class="my-p">Second p</p>
</template> 

还有父组件

<template><h1>My awesome component</h1><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 component</h1><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。

地址github.com/vuejs/core/…

最后

最近找到一个VUE的文档它将VUE的各个知识点进行了总结整理成了《Vue 开发必须知道的36个技巧》。内容比较详实对各个知识点的讲解也十分到位。

有需要的小伙伴可以点击下方卡片领取无偿分享