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

breaking

# 概要

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

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

# 2.x での構文

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

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

# 3.x での構文

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

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

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

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

# 移行の戦略

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

# 参照

• 移行ガイド - イベント API