vue使用异步组件的原因有哪些
本篇内容主要讲解“vue使用异步组件的原因有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue使用异步组件的原因有哪些”吧!
成都创新互联公司是一家专业提供宏伟企业网站建设,专注与网站设计制作、成都做网站、H5高端网站建设、小程序制作等业务。10年已为宏伟众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
使用异步组件的原因:1、异步组件可以减少打包的结果,会将异步组件分开打包,会采用异步的方式加载组件,可以有效的解决一个组件过大的问题。2、异步组件的核心可以给组件定义变成一个函数,函数里面可以用import语法,实现文件的分割加载。
使用异步组件的原因
1.异步组件可以减少打包的结果。会将异步组件分开打包,会采用异步的方式加载组件,可以有效的解决一个组件过大的问题。不使用异步组件,如果组件功能比较多打包出来的结果就会变大。
2.异步组件的核心可以给组件定义变成一个函数,函数里面可以用import语法,实现文件的分割加载,import语法是webpack提供的,采用的就是jsonp。
components:{
VideoPlay:(resolve)=>import("../components/VideoPlay")
}
components:{
VideoPlay(resolve) {
require(["../components/VideoPlay"], resolve)
}
}
或者使用回调函数
原理
在createComponent方法中,会有相应的异步组件处理,首先定义一个asyncFactory变量,然后进行判断,如果组件是一个函数,然后会去调resolveAsyncComponent方法,然后将赋值在asyncFactory上的函数传进去,会让asyncFactory马上执行,执行的时候并不会马上返回结果,因为他是异步的,返回的是一个promise,这时候这个值就是undefined,然后就会先渲染一个异步组件的占位,空虚拟节点。如果加载完之后会调factory函数传入resolve和reject两个参数,执行后返回一个成功的回调和失败的回调,promise成功了就会调resolve,resolve中就会调取forceRender方法强制更新视图重新渲染,forceRender中调取的就是$forceUpdate,同时把结果放到factory.resolved上,如果强制刷新的时候就会再次走resolveAsyncComponent方法,这时候有个判断,如果有成功的结果就把结果直接放回去,这时候resolveAsyncComponent返回的就不是undefined了,就会接的创建组件,初始化组件,渲染组件。
源码
src/core/vdom/create-component.js
1.createComponent方法
export function createComponent (
Ctor: Class
2.resolveAsyncComponent方法
export function resolveAsyncComponent (
factory: Function,
baseCtor: Class
3.createAsyncPlaceholder 方法
// 创建一个异步组件的占位,空虚拟节点 也就是一个注释
export function createAsyncPlaceholder (
factory: Function,
data: ?VNodeData,
context: Component,
children: ?Array
到此,相信大家对“vue使用异步组件的原因有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
网页标题:vue使用异步组件的原因有哪些
本文URL:http://myzitong.com/article/gipopd.html