你需要知道的Vue3七大技巧

//MyChildComponent.my-p的p标签无法设置样式-p{color:red;}:deep(.my-p){颜色：红色；}vue3自2022年9月正式发布以来，在源代码、性能、语法API等方面进行了极大的优化。如果你想学习Vue，可以从今天开始学习本文的内容。在这篇文章中，我和大家分享了Vue3的7个开发技巧，希望对大家有所帮助。让我们现在开始吧。1.VNodehook在每个组件或者html标签上，我们可以使用一些特殊的（文档没写）hooks作为事件监听器。这些钩子是：.<脚本设置>import{ref}from'vue'constcount=ref(0)functiononMyComponentMounted(){}functiondivThatDisplaysCountWasUpdated(){}示例如下：需要注意的是，这些钩子传递了一些参数给回调函数。它们只传递一个参数，当前的VNode，除了onVnodeBeforeUpdate传递了onVnodeUpdated两个参数，当前的VNode和上一个VNode。2.调试钩子我们都知道Vue为我们提供的生命周期钩子。但是您知道Vue3为我们提供了两个可用于调试目的的钩子吗？它们是：onRenderTrackedonRenderTriggeredonRenderTracked为每个已跟踪的反应依赖项调用。onRenderTriggered在我们触发反应式更新时被调用，或者如文档所说：“当反应式依赖触发组件的渲染效果重新运行时”。3.来自子组件公开插槽如果您使用的是第三方组件，您可能会将其实现包装在您自己的“包装器”组件中。这是一个很好的实践和可扩展的解决方案，但是第三方组件的插槽将会丢失，我们应该找到一种方法将它们暴露给父组件：WrapperComponent.vue