From d29497e41548d2b601966869c2f6599a0eb82a46 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Sun, 29 Nov 2020 17:56:53 +0200 Subject: [PATCH 1/5] feat: added `created` hood to directives --- src/api/application-api.md | 14 ++++++++------ src/guide/custom-directive.md | 2 ++ src/guide/migration/custom-directives.md | 1 + 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/api/application-api.md b/src/api/application-api.md index d48aab61f3..547a5f42f4 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -22,7 +22,7 @@ In addition, since the `createApp` method returns the application instance itsel - **Returns:** - The application instance if a `definition` argument was passed - - The component definition if a `definition` argument was not passed + - The component definition if a `definition` argument was not passed - **Usage:** @@ -73,7 +73,7 @@ app.config = {...} - **Returns:** - The application instance if a `definition` argument was passed - - The directive definition if a `definition` argument was not passed + - The directive definition if a `definition` argument was not passed - **Usage:** @@ -88,6 +88,8 @@ const app = createApp({}) // register app.directive('my-directive', { // Directive has a set of lifecycle hooks: + // called before bound element's parent component props are applied + created() {}, // called before bound element's parent component is mounted beforeMount() {}, // called when bound element's parent component is mounted @@ -168,7 +170,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify - **Returns:** - - The application instance + - The application instance - **Usage:** @@ -224,10 +226,10 @@ app.mount('#my-app') - **Usage:** Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values. - + From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child. - This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application. + This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application. Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties). @@ -300,7 +302,7 @@ setTimeout(() => app.unmount('#my-app'), 5000) - **Usage:** Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. - + The install method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments. When this method is called on the same plugin multiple times, the plugin will be installed only once. diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index c197992842..b93216a782 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -45,6 +45,8 @@ Then in a template, you can use the new `v-focus` attribute on any element, like A directive definition object can provide several hook functions (all optional): +- `created`: called before bound element's parent component props are applied. This is useful in cases where the directive needs to attach event listeners before parent component's prop or template listeners. + - `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. This is where you can do one-time setup work. - `mounted`: called when the bound element's parent component is mounted. diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index eaf3e53704..13ac51481e 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -39,6 +39,7 @@ Here, in the initial setup for this element, the directive binds a style by pass In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so: +- **created** - new! This is called before bound element's parent component props are applied - bind → **beforeMount** - inserted → **mounted** - **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks. From 15bb4748573236bde1eeb683702ecb9b564f3ea3 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 7 Dec 2020 11:17:08 +0200 Subject: [PATCH 2/5] Update src/api/application-api.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/api/application-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/application-api.md b/src/api/application-api.md index 547a5f42f4..e41e853d5a 100644 --- a/src/api/application-api.md +++ b/src/api/application-api.md @@ -88,7 +88,7 @@ const app = createApp({}) // register app.directive('my-directive', { // Directive has a set of lifecycle hooks: - // called before bound element's parent component props are applied + // called before bound element's attributes or event listeners are applied created() {}, // called before bound element's parent component is mounted beforeMount() {}, From ff5b8a7f963d4102ca8366f10ee14e4834d0a867 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 7 Dec 2020 11:17:19 +0200 Subject: [PATCH 3/5] Update src/guide/custom-directive.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/custom-directive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index b93216a782..f4126f5e95 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -45,7 +45,7 @@ Then in a template, you can use the new `v-focus` attribute on any element, like A directive definition object can provide several hook functions (all optional): -- `created`: called before bound element's parent component props are applied. This is useful in cases where the directive needs to attach event listeners before parent component's prop or template listeners. +- `created`: called before the bound element's attributes or event listeners are applied. This is useful in cases where the directive needs to attach event listeners that must be called before normal `v-on` event listeners. - `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. This is where you can do one-time setup work. From 6c19ce0d12394e230671e5bc4988f9fb8ff10dd0 Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Mon, 7 Dec 2020 11:17:38 +0200 Subject: [PATCH 4/5] Update src/guide/migration/custom-directives.md Co-authored-by: skirtle <65301168+skirtles-code@users.noreply.github.com> --- src/guide/migration/custom-directives.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md index 13ac51481e..985267b0e3 100644 --- a/src/guide/migration/custom-directives.md +++ b/src/guide/migration/custom-directives.md @@ -39,7 +39,7 @@ Here, in the initial setup for this element, the directive binds a style by pass In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so: -- **created** - new! This is called before bound element's parent component props are applied +- **created** - new! This is called before the element's attributes or event listeners are applied. - bind → **beforeMount** - inserted → **mounted** - **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks. From 04b4c4ca4487c85dac77ea378f6ae2deaac27f95 Mon Sep 17 00:00:00 2001 From: NataliaTepluhina Date: Tue, 8 Dec 2020 18:02:53 +0200 Subject: [PATCH 5/5] fix: updated the beforeMount description --- src/guide/custom-directive.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md index f4126f5e95..2832d45e7a 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -47,7 +47,7 @@ A directive definition object can provide several hook functions (all optional): - `created`: called before the bound element's attributes or event listeners are applied. This is useful in cases where the directive needs to attach event listeners that must be called before normal `v-on` event listeners. -- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. This is where you can do one-time setup work. +- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. - `mounted`: called when the bound element's parent component is mounted.