diff --git a/src/api/application-api.md b/src/api/application-api.md index d48aab61f3..e41e853d5a 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 attributes or event listeners 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..2832d45e7a 100644 --- a/src/guide/custom-directive.md +++ b/src/guide/custom-directive.md @@ -45,7 +45,9 @@ 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): -- `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. +- `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. - `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..985267b0e3 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 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.