Skip to content

Commit

Permalink
Migration > Vnode Lifecycle Events の翻訳を追従 (#253)
Browse files Browse the repository at this point in the history
* feat: add migration guide > vnode lifecycle events

* docs: translate migrate guide > vnode lifecycle events
  • Loading branch information
naokie authored Apr 15, 2021
1 parent 41c2578 commit 5359268
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions src/guide/migration/vnode-lifecycle-events.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
badges:
- breaking
---

# VNode ライフサイクルイベント <MigrationBadges :badges="$frontmatter.badges" />

## 概要

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

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

## 2.x での構文

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

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

## 3.x での構文

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

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

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

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

## 移行の戦略

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

## 参照

- [移行ガイド - イベント API](/guide/migration/events-api.html)

0 comments on commit 5359268

Please sign in to comment.