A quoi servent les composants asynchrones vue3 ?

Dans vue3, les composants asynchrones peuvent réduire les résultats du packaging. Les composants asynchrones seront emballés séparément et les composants seront chargés de manière asynchrone, ce qui peut résoudre efficacement le problème d'un composant trop volumineux si des composants asynchrones ne sont pas utilisés. le composant a de nombreuses fonctions. Le résultat packagé deviendra plus grand.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Les composants asynchrones sont une nouvelle méthode d'optimisation de vue, qui peut être utilisée dans des scénarios tels que le chargement du premier écran, etc.

1. Les composants asynchrones peuvent réduire les résultats de l'emballage. Les composants asynchrones seront emballés séparément et les composants seront chargés de manière asynchrone, ce qui peut résoudre efficacement le problème d'un composant trop volumineux. Sans utiliser de composants asynchrones, si le composant a plus de fonctions, le résultat packagé deviendra plus grand.

2. Le noyau du composant asynchrone peut être défini comme une fonction. La syntaxe d'importation peut être utilisée dans la fonction pour réaliser un chargement fractionné de fichiers. La syntaxe d'importation est fournie par webpack et utilise jsonp.

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

Principe

Dans la méthode createComponent, il y aura un traitement de composant asynchrone correspondant. Définissez d'abord une variable asyncFactory, puis faites un jugement si le composant est une fonction, alors la méthode solveAsyncComponent sera appelée, puis la fonction. attribué à asyncFactory sera Le transmettre entraînera l'exécution immédiate d'asyncFactory. Le résultat ne sera pas renvoyé immédiatement pendant l'exécution, car il est asynchrone et renvoie une promesse. À ce stade, la valeur n'est pas définie, puis un espace réservé de composant asynchrone. sera rendu en premier. Si après le chargement, la fonction d'usine sera appelée pour transmettre les deux paramètres de résolution et de rejet. Après l'exécution, un rappel réussi et un rappel échoué seront renvoyés. Si la promesse est réussie, la méthode forceRender sera appelée. appelé dans solve pour forcer le rendu de la vue de mise à jour, ce qui est appelé dans forceRender est $forceUpdate, et le résultat est mis sur factory.resolved Si l'actualisation est forcée, la méthode solveAsyncComponent sera à nouveau utilisée. , il y a un jugement. S'il y a un résultat réussi, le résultat sera remis directement. À ce moment, la valeur de retour de solveAsyncComponent n'est pas indéfinie et le composant sera créé, initialisé et rendu.

Code source

src/core/vdom/create-component.js

1, méthode 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, méthode solveAsyncComponent

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, méthode createAsyncPlaceholder

【Recommandations associées :《 Tutoriel vue.js》】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!