Pourquoi Vue utilise-t-il des composants asynchrones ?

Raisons d'utilisation de composants asynchrones : 1. 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. 2. Le noyau du composant asynchrone peut être défini comme une fonction et la syntaxe d'importation peut être utilisée dans la fonction pour réaliser un chargement fractionné des fichiers.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Raisons de l'utilisation de composants asynchrones

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. (Partage de vidéos d'apprentissage : Tutoriel d'introduction à Vuejs, Vidéo de programmation de base)

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 déterminez si le composant est un. fonction, puis appelez la méthode solveAsyncComponent, puis transmettez la fonction attribuée à asyncFactory, ce qui entraînera l'exécution immédiate de asyncFactory. Une fois exécuté, le résultat ne sera pas renvoyé immédiatement car il est asynchrone et renvoie une promesse à ce moment-là. La valeur n'est pas définie, puis un espace réservé pour un composant asynchrone, un nœud virtuel vide, 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 resolveAsyncComponent

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class9366e37985177da7839522e36133b6c8
): Class9366e37985177da7839522e36133b6c8 | 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 | Class9366e37985177da7839522e36133b6c8) => {
      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 createAsyncPlacerreee

(Partage de vidéos d'apprentissage :

vuejs introduction tutoriel , Vidéo de programmation de base)

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!