This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

In this article we’ll look at global APIdefineComponent, defineAsyncComponent, defineCustomElement, resolveComponent, resolveDynamicComponent, and resolve The use of Directive and withDirectives and what we need to be aware of.

How to use

defineComponent

DefineComponent only returns the objects passed to it. The value returned has a synthetic type constructor for manual rendering functions, TSX, and IDE tool support. We can use this method to define components as follows:

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
    template:'<h1>count:{{count}}</h1>'.data() {
        return { count: 1}}})Copy the code

When using components, make sure that you register it where you want to use it, i.e. in components.

defineAsyncComponent

Create an asynchronous component that is loaded only when needed. DefineAsyncComponent can accept either a factory function that returns a Promise or an object.

The factory function

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() = >
  import('the path/AsyncComponent. Vue')
)
app.component('async-component', AsyncComp)
Copy the code

You can turn a defined component into an asynchronous component.

object

const AsyncComp = defineAsyncComponent({
  loader: () = > import('the path/Foo. Vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200.timeout: 3000.suspensible: false./ * * * *@param {*} Error Indicates the error information object *@param {*} Retry A function that indicates whether the promise loader should retry * when it loads a reject@param {*} Fail a function that tells the loader to quit@param {*} Maximum number of retries allowed */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // Retry the request when an error occurs, up to three times
      retry()
    } else {
      // Note that retry/fail is like promise's resolve/reject:
      // One of these must be called to continue error handling.
      fail()
    }
  }
})
Copy the code

Among them:

  • loader: Factory function
  • loadingComponent: Component to use when loading asynchronous components
  • errorComponent: Component to use when loading fails
  • delay: the delay before displaying loadingComponent | default: 200 (ms)
  • timeout: if you provide a timeout, and load components for more than the set value, will display an error component | default: Infinity
  • suspensible: defines whether the component can hang | default value: true

defineCustomElement

Vue 3.2 added the defineCustomElement method, which takes the same parameter defineComponent but returns a native custom element that can be used in any framework or no framework at all. Use as follows:

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // This is the normal Vue component option
  props: {},
  emits: {},
  template: `... `.// DefineCustomMelement only: Inject the CSS into the shadow root
  styles: [`/* inlined css */`]})// Register custom elements.
// After registration, all "
      
       " tags on the page will be upgraded.
      
customElements.define('my-vue-element', MyVueElement)
// You can also instantiate elements programmatically:
// (after registration only)
document.body.appendChild(
  new MyVueElement({
    // Initial item (optional)}))Copy the code

We rarely use this method, but we can use it to drive Vue’s UI library.

resolveComponent

Component resolution by name is allowed if it is available in the current application instance. As follows:

app.component('my-component', {
    template: `<h1> Hello,world! </h1>`,})render() {
    console.log(resolveComponent('my-component'));
}
Copy the code

ResolveComponent can parse components and obtain details about components.

But it’s worth noting that resolveComponent can only be used in render or setup functions.

resolveDynamicComponent

ResolveComponent, resolveDynamicComponent, resolveDynamicComponent, resolveComponent, resolveDynamicComponent, resolveComponent, resolveDynamicComponent, resolveDynamicComponent

render() {
    console.log(resolveDynamicComponent('my-component'));
}
Copy the code

Obviously, resolveDynamicComponent can only be used in render or setup functions.

resolveDirective

By analogy with the first two apis, we can see that this API is used to parse instructions as follows:

app.directive('focus', {})

render() {
    console.log(resolveDirective('focus'));
}
Copy the code

ResolveDirective is used to parse directives to get details of directives and can only be used in render or setup functions.

withDirectives

Directives are allowed to be applied to a VNode, and return a VNode containing the application directives, accepting two parameters: VNode and directives. Use as follows:

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])
Copy the code

This method is used to add application instructions to the virtual DOM and can only be used in the Render or setup functions.

conclusion

  1. Although these methods are not commonly used, we still need to have a certain understanding of them.

  2. The resolve[XXX] and withDirectives methods in this article are only used in render or setup functions.

For more articles, the portal has opened: Look back at the Vue3 catalogue!