# VNode ライフサイクルイベント
breaking

# 概要

Vue 2 では、イベントを使ってコンポーネントのライフサイクルの重要なステージを監視することができました。これらのイベントは、プレフィックスの hook: からはじまり、その後にライフサイクルフックの名前がついていました。

Vue 3 では、このプレフィックスが vnode- に変更されました。また、これらのイベントは、コンポーネントとしてだけでなく HTML 要素でも利用できるようになりました。

Vue 2 では、イベント名は同等のライフサイクルフックと同じで、プレフィックスに hook: がついています:

<template>
  <child-component @hook:updated="onUpdated">
</template>

1
2
3

Vue 3 では、イベント名のプレフィックスに vnode- がついています:

<template>
  <child-component @vnode-updated="onUpdated">
</template>

1
2
3

またはキャメルケースを使用している場合は、単に vnode となります:

<template>
  <child-component @vnodeUpdated="onUpdated">
</template>

1
2
3

ほとんどの場合、プレフィックスの変更だけで済みます。ライフサイクルフックの beforeDestroy と destroyed は、それぞれ beforeUnmount と unmounted に名前が変更され、対応するイベント名も更新する必要があります。