Skip to content

Minor revisions to the migration guide for custom directives #689

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.

Sign up for GitHub

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 1 commit into from
Nov 11, 2020
Merged

Minor revisions to the migration guide for custom directives #689

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 5 additions & 9 deletions src/guide/migration/custom-directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@ badges:

## Overview

Here is a quick summary of what has changed:

- API has been renamed to better align with component lifecycle

For more information, read on!
The hook functions for directives have been renamed to better align with the component lifecycle.

## 2.x Syntax

Expand Down Expand Up @@ -45,10 +41,10 @@ In Vue 3, however, we’ve created a more cohesive API for custom directives. As

- bind → **beforeMount**
- inserted → **mounted**
- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks.
- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks.
- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
- componentUpdated → **updated**
- **beforeUnmount**: new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted.
- unbind -> **unmounted**

The final API is as follows:
Expand All @@ -57,7 +53,7 @@ The final API is as follows:
const MyDirective = {
beforeMount(el, binding, vnode, prevVnode) {},
mounted() {},
beforeUpdate() {},
beforeUpdate() {}, // new
updated() {},
beforeUnmount() {}, // new
unmounted() {}
Expand Down Expand Up @@ -103,5 +99,5 @@ mounted(el, binding, vnode) {
```

:::warning
With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a directive will be ignored and a warning will be logged.
:::