From c43ab3543e800caefa715f06195d15add8e04974 Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 15 Apr 2021 00:33:50 +0900 Subject: [PATCH 1/2] feat: add migration guide > vnode lifecycle events --- src/guide/migration/vnode-lifecycle-events.md | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/guide/migration/vnode-lifecycle-events.md diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md new file mode 100644 index 00000000..6642f63a --- /dev/null +++ b/src/guide/migration/vnode-lifecycle-events.md @@ -0,0 +1,48 @@ +--- +badges: + - breaking +--- + +# VNode Lifecycle Events + +## Overview + +In Vue 2, it was possible to use events to listen for key stages in a component's lifecycle. These events had names that started with the prefix `hook:`, followed by the name of the corresponding lifecycle hook. + +In Vue 3, this prefix has been changed to `vnode-`. In addition, these events are now available for HTML elements as well as components. + +## 2.x Syntax + +In Vue 2, the event name is the same as the equivalent lifecycle hook, prefixed with `hook:`: + +```html + +``` + +## 3.x Syntax + +In Vue 3, the event name is prefixed with `vnode-`: + +```html + +``` + +Or just `vnode` if you're using camel case: + +```html + +``` + +## Migration Strategy + +In most cases it should just require changing the prefix. The lifecycle hooks `beforeDestroy` and `destroyed` have been renamed to `beforeUnmount` and `unmounted` respectively, so the corresponding event names will also need to be updated. + +## See also + +- [Migration guide - Events API](/guide/migration/events-api.html) From 8119bf85264a5323d32239f2e3c3d9476d66ec0a Mon Sep 17 00:00:00 2001 From: Naoki Endoh Date: Thu, 15 Apr 2021 01:02:15 +0900 Subject: [PATCH 2/2] docs: translate migrate guide > vnode lifecycle events --- src/guide/migration/vnode-lifecycle-events.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md index 6642f63a..232d32eb 100644 --- a/src/guide/migration/vnode-lifecycle-events.md +++ b/src/guide/migration/vnode-lifecycle-events.md @@ -3,17 +3,17 @@ badges: - breaking --- -# VNode Lifecycle Events +# VNode ライフサイクルイベント -## Overview +## 概要 -In Vue 2, it was possible to use events to listen for key stages in a component's lifecycle. These events had names that started with the prefix `hook:`, followed by the name of the corresponding lifecycle hook. +Vue 2 では、イベントを使ってコンポーネントのライフサイクルの重要なステージを監視することができました。これらのイベントは、プレフィックスの `hook:` からはじまり、その後にライフサイクルフックの名前がついていました。 -In Vue 3, this prefix has been changed to `vnode-`. In addition, these events are now available for HTML elements as well as components. +Vue 3 では、このプレフィックスが `vnode-` に変更されました。また、これらのイベントは、コンポーネントとしてだけでなく HTML 要素でも利用できるようになりました。 -## 2.x Syntax +## 2.x での構文 -In Vue 2, the event name is the same as the equivalent lifecycle hook, prefixed with `hook:`: +Vue 2 では、イベント名は同等のライフサイクルフックと同じで、プレフィックスに `hook:` がついています: ```html ``` -## 3.x Syntax +## 3.x での構文 -In Vue 3, the event name is prefixed with `vnode-`: +Vue 3 では、イベント名のプレフィックスに `vnode-` がついています: ```html ``` -Or just `vnode` if you're using camel case: +またはキャメルケースを使用している場合は、単に `vnode` となります: ```html ``` -## Migration Strategy +## 移行の戦略 -In most cases it should just require changing the prefix. The lifecycle hooks `beforeDestroy` and `destroyed` have been renamed to `beforeUnmount` and `unmounted` respectively, so the corresponding event names will also need to be updated. +ほとんどの場合、プレフィックスの変更だけで済みます。ライフサイクルフックの `beforeDestroy` と `destroyed` は、それぞれ `beforeUnmount` と `unmounted` に名前が変更され、対応するイベント名も更新する必要があります。 -## See also +## 参照 -- [Migration guide - Events API](/guide/migration/events-api.html) +- [移行ガイド - イベント API](/guide/migration/events-api.html)