Skip to content

Add a migration guide entry for renaming hook: to vnode- #857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/.vuepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ const sidebar = {
'/guide/migration/v-model',
'/guide/migration/v-if-v-for',
'/guide/migration/v-bind',
'/guide/migration/vnode-lifecycle-events',
'/guide/migration/watch'
]
}
Expand Down
1 change: 1 addition & 0 deletions src/guide/migration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ The following consists a list of breaking changes from 2.x:
- [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
- `<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
- In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead - this means the container itself is no longer considered part of the template.
- [Lifecycle `hook:` events prefix changed to `vnode-`](/guide/migration/vnode-lifecycle-events.html)

### Removed APIs

Expand Down
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 Lifecycle Events <MigrationBadges :badges="$frontmatter.badges" />

## 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
<template>
<child-component @hook:updated="onUpdated">
</template>
```

## 3.x Syntax

In Vue 3, the event name is prefixed with `vnode-`:

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

Or just `vnode` if you're using camel case:

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

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