You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/custom-directives.md
+5-9
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,7 @@ badges:
7
7
8
8
## Overview
9
9
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.
15
11
16
12
## 2.x Syntax
17
13
@@ -45,10 +41,10 @@ In Vue 3, however, we’ve created a more cohesive API for custom directives. As
45
41
46
42
- bind → **beforeMount**
47
43
- 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.
49
45
- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
50
46
- 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.
52
48
- unbind -> **unmounted**
53
49
54
50
The final API is as follows:
@@ -57,7 +53,7 @@ The final API is as follows:
57
53
constMyDirective= {
58
54
beforeMount(el, binding, vnode, prevVnode) {},
59
55
mounted() {},
60
-
beforeUpdate() {},
56
+
beforeUpdate() {},// new
61
57
updated() {},
62
58
beforeUnmount() {}, // new
63
59
unmounted() {}
@@ -103,5 +99,5 @@ mounted(el, binding, vnode) {
103
99
```
104
100
105
101
:::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.
0 commit comments