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

Question

是否有我们可以在每个组件实例中访问的 bool 值来了解码件何时安装？

就像是:

<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 有一个未记录的功能，您可以在其中知道组件的生命周期 Hook 何时执行: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
  }
}