docs: add a migration entry for renaming hook: to vnode- (#857)

Author: skirtles-code

src/.vuepress/config.js

@@ -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'
       ]
     }

src/guide/migration/introduction.md

@@ -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
 

src/guide/migration/vnode-lifecycle-events.md

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