vue3 已经发布很久了，但是也有很多小伙伴因为兼容性的问题，还是使用 vue2 的版本。所以大家对 vue3 的熟练度还远远不如 vue2。今天我们来盘点一下一些 vue3 代码中的小 Tips， 看看你知道多少。

善用调试hook

vue3 新增了 onRenderTracked 和 onRenderTracked 两个 hook 在开发环境中用于追踪依赖的调用过程。

• onRenderTracked 当组件渲染过程中追踪到响应式依赖时调用

• onRenderTriggered 调试钩子，当响应式依赖的变更触发了组件渲染时调用。
  
  

善用 VNode 节点生命周期

在vue中，每个节点 VNode 在不同的生命周期内都会触发不同的生命周期函数，我们可以监听这些生命周期来处理我们想要做的事情。这些生命周期函数包括以下钩子：

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

这些生命周期函数在 vue 文档中并未体现，应该是属于内部使用

Teleport

官方的解释是将Teleport 组件内的插槽内容渲染到 DOM 中的另一个位置。

通过 Teleport 组件，我们可以在项目的任意组件位置定义渲染在指定挂载点的内容，非常方便。以前在vue2 还得手动 mount 再 appendChild 才能实现。

Fragments

通过 Fragments 特性，我们可以在组件内定义多个根组件了。

Suspense

虽然这是一个实验性质的内置组件，但是在解决异步数据展示的场景非常实用，它将以前要写大量的样本代码逻辑进行抽象，只需要通过指定的插槽传入对应的元素即可。

useAttrs & useSlots

在 setup 中，我们现在可以使用 useAttrs 和 useSlots 钩子，实现组件attrs 参数和 slot 属性的获取。避免以前通过this.$attrs 的方式进行获取。进一步降低代码的复杂度。

而且在 vue3 中 attrs 现在包括了传给子组件的所有属性（attr、class、 style）

自定义 v-model

在组件善于使用自定义的 v-model 这样在组件通信的上，可以减少很多不必要的样式代码使用。在vue3 中，自定义 v-model 采用了新的实现方案：

可以看出 vue3 在自定义 v-model 上更加统一了，以前 vue2 自定义 v-model 的时候，外部绑定是使用 属性 + .sync 修饰符的。现在是直接可以使用 v-model+参数的形式，更加直观了。

小结

如果你有在日常开发使用还有其他关于 vue3 的使用技巧，欢迎留言评论，大家一起探讨，一起进步～