Detailed explanation of the principles of Vue dynamic components and asynchronous components

Preface

In the official vue information, we can learn how to build "dynamic components" and "asynchronous components" through vue. However, in the official information, there is no real "dynamic asynchronous" component involved. After a lot of time research and technical analysis, we give the current reasonable technical implementation method and analyze the principles of vue dynamic asynchronous components.

The existence of dynamic components & asynchronous components makes it easier for us to control the volume of the first screen code and speed up the loading speed.

Putting aside specific details, an ordinary Vue component mainly goes through the following process from creation to presentation on the page:

// Component Object{
 template: '<div>I am async!</div>'
}
// Get the corresponding render function through compileToFunctionswith(this) {
 return _c('div', [_v("I am async!")])
}
// By passing render get Vnode Again update Become realDOM

What is the difference between dynamic components and asynchronous components?

The main difference is the createComponent step in render, for example.

// Components('example', {
 template: '<div>I am async!</div>'
})

When ordinary components createComponent, they will use the corresponding constructor to generate the corresponding Vnode based on the options customized by the developer to obtain the corresponding Vnode. And an asynchronous component

// Asynchronous components('async-example', function (resolve, reject) {
 // Use setTimeout to simulate requests setTimeout(function () {
  // Pass component definition to the `resolve` callback  resolve({
   template: '<div>I am async!</div>'
  })
 }, 1000)
})

It will take a series of processing, the specific process is as follows

In source codecreate-component。

// async component
let asyncFactory
if (isUndef()) {
 asyncFactory = Ctor
 Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
 if (Ctor === undefined) {
  // return a placeholder node for async component, which is rendered
  // as a comment node but preserves all the raw information for the node.
  // the information will be used for async server-rendering and hydration.
  return createAsyncPlaceholder(
   asyncFactory,
   data,
   context,
   children,
   tag
  )
 }
}

First of all, Ctor is different from before, here is a function

function (resolve, reject) {
 // Use setTimeout to simulate requests setTimeout(function () {
  // Pass component definition to the `resolve` callback  resolve({
   template: '<div>I am async!</div>'
  })
 }, 1000)
}

Called afterwardresolveAsyncComponent(asyncFactory, baseCtor, context)

resolveAsyncComponent in source coderesolveAsyncComponent。

The main function of resolveAsyncComponent is to define the resolve and reject functions required by Ctor

// factory is Ctorfactory(resolve, reject)

Take the resolve function as an example

const resolve = once((res: Object | Class<Component>) => {
 // Cache resolved  = ensureCtor(res, baseCtor)
 // Force rendering if (!sync) {
 	forceRender(true)
 }
})

Once literally understands it, it means only calls once. Called when setTimeout in Ctor ends.

ensureCtor isEncapsulation to adapt to different scenarios, so the main function of the resolve function is to convert the obtained Ctor into a constructor and cache it when completed asynchronously middle.

Use laterforceRender(true) Forced to re- render, because it was cached before, the resolveAsyncComponent function directly returns the component's constructor.

if (isDef()) {
 return 
}

Then it is consistent with the normal components.

Summarize

The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.