Skip to content

Commit 008ec9a

Browse files
fix: minor revisions to the migration guide for custom directives (#689)
1 parent d5fb5ae commit 008ec9a

File tree

1 file changed

+5
-9
lines changed

1 file changed

+5
-9
lines changed

Diff for: src/guide/migration/custom-directives.md

+5-9
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@ badges:
77

88
## Overview
99

10-
Here is a quick summary of what has changed:
11-
12-
- API has been renamed to better align with component lifecycle
13-
14-
For more information, read on!
10+
The hook functions for directives have been renamed to better align with the component lifecycle.
1511

1612
## 2.x Syntax
1713

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

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

5450
The final API is as follows:
@@ -57,7 +53,7 @@ The final API is as follows:
5753
const MyDirective = {
5854
beforeMount(el, binding, vnode, prevVnode) {},
5955
mounted() {},
60-
beforeUpdate() {},
56+
beforeUpdate() {}, // new
6157
updated() {},
6258
beforeUnmount() {}, // new
6359
unmounted() {}
@@ -103,5 +99,5 @@ mounted(el, binding, vnode) {
10399
```
104100

105101
:::warning
106-
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.
102+
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.
107103
:::

0 commit comments

Comments
 (0)