Vue.js：有没有办法知道组件实例何时被挂载？

Question

是否有一个布尔值我们可以在每个组件实例中访问以了解组件何时安装？

就像是：

<template>
  <div>
    <span v-if="$mounted">I am mounted</span>
    <span v-if="$created">I am created</span>
    <span>Called before created and mounted</span>
  </div>
</template>

Answer 1

2020 年更新

Vue.js 有一个未公开的功能，您可以在其中知道组件的生命周期钩子何时执行：Source。

语法如下：

<ChildComponent @hook:lifecycleHookName="callAMethod" />

例子：

如何知道子组件何时被挂载：

<ChildComponent @hook:mounted="componentMountedDoSomething" />

如何知道子组件何时被创建：

<ChildComponent @hook:created="componentCreatedDoSomething" />

<template>
  <div>
    <span v-if="mounted">I am mounted</span>
    <span v-if="created">I am created</span>
    <span>Called before created and mounted</span>
  </div>
</template>

和脚本：

export default {
  data: () => ({
    created: false,
    mounted: false
  }),
  created () {
    this.created = true
  },
  mounted() {
    this.mounted = true
  }
}