后端开发教程 - Java、Spring Boot 实战 - msg200.com
你需要知道的 7 个 Vue3 技巧
VNode 钩子
在每个组件或 HTML 标签上，我们可以使用一些特殊的（未记录的）钩子作为事件监听器。这些钩子包括：
onVnodeBeforeMountonVnodeMountedonVnodeBeforeUpdateonVnodeUpdatedonVnodeBeforeUnmountonVnodeUnmounted
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>
需要注意的是，这些钩子会向回调函数传递一些参数。除了 和 之外，它们只传递一个参数，即当前 VNode，onVnodeBeforeUpdate而onVnodeUpdated和 会传递两个参数，即当前 VNode 和前一个 VNode。
调试钩子
我们都知道 Vue 提供的生命周期钩子。但是你知道 Vue 3 还提供了两个可用于调试的钩子吗？它们是：
onRenderTracked针对每个被跟踪的反应依赖项进行调用。
<script setup>
import { ref, onRenderTracked } from 'vue'
const count = ref(0)
const count2 = ref(0)
// It will be called twice, once for count and once for count2
onRenderTracked((event) => {
console.log(event)
})
</script>
onRenderTriggered当我们触发反应性更新时被调用，或者如文档所述：“当反应性依赖项触发组件的渲染效果重新运行时”。
<script setup>
import { ref, onRenderTriggered } from 'vue'
const count = ref(0)
// It will be called when we update count
onRenderTriggered((event) => {
debugger
})
</script>
从子组件中暴露插槽
如果你使用第三方组件，你很可能会把它的实现包装在你自己“包装器”组件中。这是一个很好的实践，并且可扩展的解决方案，但这样一来，第三方组件的插槽就会丢失，我们应该想办法把它们暴露给父组件：
WrapperComponent.vue
<template>
<div class="wrapper-of-third-party-component">
<ThirdPartyComponent v-bind="$attrs">
<!-- 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>
</div>
</template>
现在每个使用的组件WrapperComponent都可以使用🎉的插槽ThirdPartyComponent。
作用域样式和多根节点不能很好地协同工作
在 Vue 3 中，我们终于可以拥有不止一个“根节点”的组件了。这很棒，但就我个人而言，这样做会遇到一个设计限制。假设我们有一个子组件：
<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>
// There is no way to style the p tags of MyChildComponent
.my-p { color: red; }
:deep(.my-p) { color: red; }
</style>
无法从多根父组件的范围样式来设置子组件的 p 标签的样式。
简而言之，多根组件不能使用范围样式来定位多根子组件的样式。
解决这个问题的最佳方法是包装父组件或子组件（或两者），这样我们就只有一个根元素。
但如果您确实需要两者都有多根节点，您可以：
- 使用非范围样式
<style>
.my-p { color: red; }
</style>
- 使用 CSS 模块
<template>
<h1>My awesome component</h1>
<MyChildComponent :class="$style.trick" />
</template>
<style module>
.trick {
color: red;
}
</style>
由于我们在这里指定了一个类，因此多根子组件必须明确指定属性 fallthrough 行为。
如果您想听听我的意见，除非您绝对需要多根节点组件，否则请使用单个根节点，根本不要处理这个设计限制。
使用 CSS 选择器时要小心
#main-nav > li {}相比之下会慢很多倍.my-li { color: red }。文档中写道：
由于浏览器渲染各种 CSS 选择器的方式不同，p { color: red } 在作用域内（即与属性选择器结合使用时）会慢很多倍。如果你使用类或 ID，例如 .example { color: red }，那么几乎可以消除这种性能损失。
如果您想深入了解这个主题，我强烈建议您阅读《高效渲染 CSS》 。
布尔转换
在 Vue 2 或 Vue 3 的早期版本中，对于布尔类型的 props，我们根据顺序有不同的行为：
第一种情况：
props: {
hoverColor: [String, Boolean] // <- defaults to ''
}
第二种情况：
props: {
hoverColor: [Boolean, String] // <- defaults to false
}
不仅如此，如果你像这样传递 prop：
<my-component hover-color></my-component>
在第一种情况下，它将是一个空字符串''。在第二种情况下，它将是true。
如你所见，这有点令人困惑且不一致。幸运的是，在 Vue 3 中，我们有了一种一致且可预测的新行为：
Boolean无论类型出现顺序如何，行为都将适用。
所以：
hoverColor: [String, Boolean] // <- defaults to false
hoverColor: [Boolean, String] // <- defaults to false
hoverColor: [Boolean, Number] // <- defaults to false
带有 v-for 的模板引用 - 顺序无法保证
记住这一点，这样你就不会浪费几个小时去调试，试图弄清楚到底发生了什么
在下面的代码中：
<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>
我们循环遍历list数组，并创建itemRefs数组。
itemRefs不保证具有与list数组相同的顺序。
如果您想了解更多相关信息，可以阅读本期内容。
文章结束
我确实还有很多技巧和窍门，但这篇文章已经很长了。期待不久的将来会有另一篇文章，分享更好的技巧和窍门。
感谢大家的阅读，非常感谢任何反馈！
知道有哪家很酷的公司正在招聘 Vue.js 开发人员吗？
另外，我正在寻找一份新工作，所以如果你知道有一家很棒的公司正在招聘高级 Vue.js 开发人员，请联系rolanddoda2014@gmail.com 🙏。
