Wozu dienen asynchrone vue3-Komponenten?

In vue3 können asynchrone Komponenten die Ergebnisse der Verpackung verringern und Komponenten werden asynchron geladen, wodurch das Problem einer zu großen Komponente effektiv gelöst werden kann Die Komponente hat viele Funktionen. Das verpackte Ergebnis wird größer.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Asynchrone Komponenten sind eine neue Optimierungsmethode von Vue, die in Szenarien wie dem Laden des ersten Bildschirms usw. verwendet werden kann.

1. Asynchrone Komponenten können die Verpackungsergebnisse verringern. Asynchrone Komponenten werden separat verpackt und Komponenten werden asynchron geladen, wodurch das Problem einer zu großen Komponente effektiv gelöst werden kann. Ohne die Verwendung asynchroner Komponenten wird das Paketergebnis größer, wenn die Komponente über mehr Funktionen verfügt.

2. Der Kern der asynchronen Komponente kann als Funktion definiert werden, um das geteilte Laden von Dateien zu realisieren. Die Importsyntax wird von Webpack bereitgestellt.

components:{
  VideoPlay:(resolve)=>import("../components/VideoPlay")
}
 
components:{
  VideoPlay(resolve) {
    require(["../components/VideoPlay"], resolve)
  }
}
 
或者使用回调函数

Prinzip

In der createComponent-Methode wird zunächst eine asyncFactory-Variable definiert und dann beurteilt. Wenn die Komponente eine Funktion ist, wird die Methode „resolveAsyncComponent“ aufgerufen und dann der Funktion zugewiesen Die Übergabe der asyncFactory führt dazu, dass die asyncFactory während der Ausführung nicht sofort zurückgegeben wird, da sie zu diesem Zeitpunkt asynchron ist und ein Versprechen zurückgibt Zuerst gerendert. Leerer virtueller Knoten. Wenn nach dem Laden die Factory-Funktion aufgerufen wird, werden die beiden Parameter „resolve“ und „reject“ zurückgegeben. Wenn das Versprechen erfolgreich ist, wird die Methode „resolve“ aufgerufen Wird in „resolve“ aufgerufen, um ein erneutes Rendern der Aktualisierungsansicht zu erzwingen. In „forceRender“ wird das Ergebnis auf „factory.resolved“ abgelegt. Wenn die Aktualisierung erzwungen wird, wird die Methode „resolveAsyncComponent“ erneut verwendet Wenn ein erfolgreiches Ergebnis vorliegt, wird das Ergebnis direkt zurückgesetzt. Zu diesem Zeitpunkt ist der Rückgabewert von „resolveAsyncComponent“ nicht undefiniert und die Komponente wird erstellt, initialisiert und gerendert.

Quellcode

src/core/vdom/create-component.js

1, Methode „createComponent“

export function createComponent (
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  let asyncFactory
  if (isUndef(Ctor.cid)) { // 看组件是否是一个函数
    asyncFactory = Ctor // 异步组件一定是一个函数 新版本提供了对象的写法
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor) //默认调用此函数时返回undefiend
    // 第二次渲染时Ctor不为undefined
    if (Ctor === undefined) {
      //返回async组件的占位符节点
      //作为注释节点，但保留该节点的所有原始信息
      //该信息将用于异步服务器渲染和水合。
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }
}

2, Methode „resolveAsyncComponent“

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class<Component>
): Class<Component> | void {
  // 如果有错误就返回错误结果
  if (isTrue(factory.error) && isDef(factory.errorComp)) {
    return factory.errorComp
  }
  // 再次渲染时可以拿到获取的最新组件
  // 如果有成功的结果，就直接返回去
  if (isDef(factory.resolved)) {
    return factory.resolved
  }
 
  if (owner && !isDef(factory.owners)) {
    // forceRender 强制刷新渲染
    const forceRender = (renderCompleted: boolean) => {
      for (let i = 0, l = owners.length; i < l; i++) {
        (owners[i]: any).$forceUpdate() // 执行$forceUpdate
      }
    }
    // 成功
    const resolve = once((res: Object | Class<Component>) => {
      factory.resolved = ensureCtor(res, baseCtor)
      if (!sync) {
        forceRender(true) // 执行强制更新视图重新渲染方法
      } else {
        owners.length = 0
      }
    })
    // 失败
    const reject = once(reason => {
      if (isDef(factory.errorComp)) {
        factory.error = true
        forceRender(true)
      }
    })
 
    // 执行factory 将resolve方法和reject方法传入
    const res = factory(resolve, reject)
 
    sync = false
    return factory.loading ? factory.loadingComp : factory.resolved // 返回结果
  }
}

3, Methode „createAsyncPlaceholder“

【Verwandte Empfehlungen :《 vue.js Tutorial》】

Das obige ist der detaillierte Inhalt vonWozu dienen asynchrone vue3-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!