vuedose.tips（翻译系列十）

Listen to lifecycle hooks on third-party Vue.js components

https://vuedose.tips/tips/the-power-of-snapshot-testing​vuedose.tips

Here’s a very useful tip I learnt once from my friendDamian Dulisz, the Vue.js core team member that created the officialVue newsletterandvue-multiselect.

在某些情况下，我需要知道何时从父组件创建，安装或更新了组件，尤其是在为 vanilla JS libraries 构建组件时。

您可能已经在自己的组件中拥有了类似的功能，例如，通过从子组件发出生命周期挂钩中的事件，如下所示：

mounted() {
  this.$emit("mounted");
}

So then you can listen to it from the parent component like<Child @mounted="doSomething"/>.

让我告诉你：这是没有必要的，实际上，您将无法在第三方组件上做到这一点。

相反，该解决方案就像侦听带有生命周期挂钩名称（以@hook：为前缀）的事件一样简单

例如，如果您想在第三方组件v-runtime-template呈现时执行某项操作，则可以收听其更新的生命周期挂钩：

<v-runtime-template @hook:updated="doSomething"  :template="template"  />  

Still don’t trust me? Check it yourself in thisCodeSandbox!