阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js中为什么要使用异步组件?

      问题

      为什么要使用异步组件?

      答案

      • 如果组件功能多打包出的结果会变大,我可以采用异步的方式来加载组件。主要依赖import()这个语法,可以实现文件的分割加载。
      components:{
        AddCustomerSchedule(resolve) {
              require(["../components/AddCustomer"], resolve);
          }
      }
      

      对应源码

      export function createComponent (
        Ctor: Class<Component> | Function | Object | void,
        data: ?VNodeData,
        context: Component,
        children: ?Array<VNode>,
        tag?: string
      ): VNode | Array<VNode> | void {
      
        // async component
        let asyncFactory
        if (isUndef(Ctor.cid)) {
          asyncFactory = Ctor
          Ctor = resolveAsyncComponent(asyncFactory, baseCtor) // 默认调用此函数时返回undefiend
          // 第二次渲染时Ctor不为undefined
          if (Ctor === undefined) {
            return createAsyncPlaceholder( // 渲染占位符 空虚拟节点
              asyncFactory,
              data,
              context,
              children,
              tag
            )
          }
        }
      }
      function resolveAsyncComponent (
        factory: Function,
        baseCtor: Class<Component>
      ): Class<Component> | void {
        if (isDef(factory.resolved)) { // 3.在次渲染时可以拿到获取的最新组件
          return factory.resolved
        }
        const resolve = once((res: Object | Class<Component>) => {
            factory.resolved = ensureCtor(res, baseCtor)
            if (!sync) {
              forceRender(true) //2. 强制更新视图重新渲染
            } else {
              owners.length = 0
            }
        })
        const reject = once(reason => {
            if (isDef(factory.errorComp)) {
                factory.error = true
                forceRender(true)
            }
        })
        const res = factory(resolve, reject)// 1.将resolve方法和reject方法传入,用户调用resolve方法后
        sync = false
        return factory.resolved
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录