Vue.js: 컴포넌트 인스턴스가 마운트된 시기를 알 수 있는 방법이 있습니까?

Vue.js: 컴포넌트 인스턴스가 마운트된 시기를 알 수 있는 방법이 있습니까?

각 컴포넌트 인스턴스에 액세스하여 컴포넌트가 마운트된 시기를 알 수 있는 부울이 있습니까?

예를 들어 다음과 같습니다.

<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>

업데이트 2020

Vue.js에는 컴포넌트의 라이프 사이클 후크가 언제 실행되는지 알 수 있는 문서화되어 있지 않은 기능이 있습니다.출처.

구문은 다음과 같습니다.

<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
  }
}

네, 라이프 사이클 후크를 사용합니다.

new Vue({
  data: {
    a: 1
  },
  created() {
    // `this` points to the vm instance
    console.log('a is: ' + this.a)
  },
  mounted() {
    console.log("i am mounted in dom");
  }
})

언급URL : https://stackoverflow.com/questions/55079866/vue-js-is-there-a-way-to-know-when-the-component-instance-is-mounted