Shulou(Shulou.com)06/02 Report--

This article is about how to use vue3 asynchronous components. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In vue3, asynchronous components can reduce the result of packaging, pack asynchronous components separately, and load components asynchronously, which can effectively solve the problem that a component is too large; if you do not use asynchronous components, the result of packaging will become larger if you do not use asynchronous components.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Asynchronous component is a new optimization method of vue, for example, it can be used in scenarios such as loading on the first screen.

1. Asynchronous components can reduce the result of packaging. The asynchronous components will be packaged separately and the components will be loaded asynchronously, which can effectively solve the problem that a component is too large. Do not use asynchronous components, if the components are more functional, the packaged results will become larger.

2, the core of the asynchronous component can define the component into a function, the function can use import syntax to achieve file division loading, import syntax is provided by webpack, using jsonp.

Components: {VideoPlay: (resolve) = > import (".. / components/VideoPlay")} components: {VideoPlay (resolve) {require ([".. / components/VideoPlay"], resolve)}} or use callback function principle

In the createComponent method, there will be corresponding asynchronous component processing. First, an asyncFactory variable is defined, and then the judgment is made. If the component is a function, then the resolveAsyncComponent method is called, and then the function assigned on the asyncFactory is passed in, which will let asyncFactory execute immediately. When executing, it will not immediately return the result, because it is asynchronous and returns a promise. At this time, the value is undefined. Then it will first render the placeholder of an asynchronous component, emptying the quasi-node. If after loading, the factory function will be called into the parameters resolve and reject, and a successful callback and a failed callback will be returned after execution. If promise succeeds, it will call the forceRender method in resolve,resolve to force the view to be updated and re-rendered, and $forceUpdate will be called in forceRender. At the same time, the result will be put on factory.resolved. If it is forced to refresh, the resolveAsyncComponent method will be used again. At this time, there is a judgment. If there is a successful result, put the result back directly. At this time, resolveAsyncComponent will not return undefined. It will create the component, initialize the component, and render the component.

Source code

Src/core/vdom/create-component.js

1. CreateComponent method

Export function createComponent (Ctor: Class | Function | Object | void, data:? VNodeData, context: Component, children:? Array, tag?: string): VNode | Array | void {let asyncFactory if (isUndef (Ctor.cid)) {/ / see if the component is a function asyncFactory = Ctor / / Asynchronous component must be a new version of the function that provides the writing of the object Ctor = resolveAsyncComponent (asyncFactory) BaseCtor) / / returns undefiend when calling this function by default / / Ctor is not undefined if in the second rendering (Ctor = = undefined) {/ / returns the placeholder node of the async component / / as a comment node However, retain all the original information of the node / / this information will be used for asynchronous server rendering and hydration. Return createAsyncPlaceholder (asyncFactory, data, context, children, tag)}}

2. ResolveAsyncComponent method

Export function resolveAsyncComponent (factory: Function, baseCtor: Class): Class | void {/ / return the error result if there is an error if (isTrue (factory.error) & & isDef (factory.errorComp)) {return factory.errorComp} / / you can get the latest component obtained when rendering again / / if there is a successful result Directly return to if (isDef (factory.resolved)) {return factory.resolved} if (owner & &! isDef (factory.owners)) {/ / forceRender force refresh rendering const forceRender = (renderCompleted: boolean) = > {for (let I = 0, l = owners.length) I

{factory.resolved = ensureCtor (res BaseCtor) if (! sync) {forceRender (true) / / execute the forced update view re-rendering method} else {owners.length = 0}) / / failed const reject = once (reason = > {if (isDef (factory.errorComp) {factory.error = true forceRender (true)}) / / execute factory to pass resolve method and reject method into const res = factory (resolve Reject) sync = false return factory.loading? Factory.loadingComp: factory.resolved / / return result}}

3. CreateAsyncPlaceholder method

/ / create a placeholder for an asynchronous component, and the empty pseudo node is a comment export function createAsyncPlaceholder (factory: Function, data:? VNodeData, context: Component, children:? Array, tag:? string): VNode {const node = createEmptyVNode () node.asyncFactory = factory node.asyncMeta = {data, context, children, tag} return node} Thank you for reading! This is the end of this article on "how to use vue3 Asynchronous components". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.