vue3 비동기 구성 요소의 용도는 무엇입니까?

vue3에서는 비동기식 구성요소를 사용하면 패키징 결과를 줄일 수 있습니다. 비동기식 구성요소는 별도로 패키징되며 구성요소가 비동기식으로 로드되므로 비동기식 구성요소를 사용하지 않는 경우 구성요소가 너무 큰 문제를 효과적으로 해결할 수 있습니다. 구성 요소에는 많은 기능이 있습니다. 패키지된 결과는 더 커집니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

비동기 구성 요소는 Vue의 새로운 최적화 방법으로, 첫 번째 화면 로딩 등과 같은 시나리오에서 사용할 수 있습니다.

1. 비동기식 구성 요소는 패키징 결과를 줄일 수 있습니다. 비동기식 구성 요소는 별도로 패키지되고 구성 요소는 비동기식으로 로드되므로 구성 요소가 너무 큰 문제를 효과적으로 해결할 수 있습니다. 비동기식 컴포넌트를 사용하지 않고 컴포넌트에 더 많은 기능이 있으면 패키지된 결과가 더 커집니다.

2. 비동기 구성 요소의 핵심은 함수에서 가져오기 구문을 사용하여 파일 분할 로드를 실현할 수 있습니다. 가져오기 구문은 webpack에서 제공되며 jsonp를 사용합니다.

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

Principle

createComponent 메소드에는 해당 비동기 구성 요소 처리가 있습니다. 먼저 asyncFactory 변수를 정의한 다음 구성 요소가 함수인 경우 resolveAsyncComponent 메소드가 호출되고 해당 함수가 할당됩니다. asyncFactory를 전달하면 asyncFactory가 즉시 실행됩니다. 결과는 비동기이고 약속을 반환하기 때문에 이 때 값은 정의되지 않으며 비동기 구성 요소 자리 표시자가 됩니다. 먼저 렌더링됩니다. 로드 후 두 매개변수인 해결 및 거부를 전달하기 위해 팩토리 함수가 호출되며, 실행 후에는 성공적인 콜백과 실패한 콜백이 반환됩니다. 뷰를 강제로 업데이트하고 다시 렌더링하기 위해 Resolve에서 호출되며, forceRender에서 호출되는 것은 $forceUpdate이며 결과는 새로 고침이 강제로 실행되면 ResolveAsyncComponent 메서드가 다시 사용됩니다. 이번에는 판정이 있는데, 성공적인 결과가 있으면 결과가 직접 반환됩니다. 이때, resolveAsyncComponent는 더 이상 정의되지 않은 상태로 반환되고 구성 요소가 생성되고 초기화되고 렌더링됩니다. CodeSource CodeceSrc/core/vdom/create-component.js

1, createcomponent methods

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, resolveasynccomponent methodshrreee

3, createAsyncplaceholder method

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 // 返回结果
  }
}

【관련 권장 사항 : 《 vue.js 튜토리얼》】

위 내용은 vue3 비동기 구성 요소의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!