Vue动态组件和异步组件原理详解
前言
在vue官方资料中，我们可以可以很学会如何通过vue构建“动态组件”以及“异步组件”，然而，在官方资料中，并没有涉及到真正的“动态异步”组件，经过大量的时间研究和技术分析，我们给出目前比较合理的技术实现方式，并分析一下vue动态异步组件的原理
动态组件&异步组件的存在，使得我们更方便地控制首屏代码的体积，加快加载速度。
抛开具体细节不谈，一个普通Vue组件从创建到展现在页面里，主要经历了以下流程：
//组件Object
{
template:'Iamasync!'
}
//经过compileToFunctions得到对应的renderfunction
with(this){
return_c('div',[_v("Iamasync!")])
}
//在经过render得到Vnode再update成为真实DOM
动态组件&异步组件与之有什么区别呢？
主要区别在于render中createComponent这一步，举例。
//组件
Vue.component('example',{
template:'Iamasync!'
})
普通组件在createComponent时，会依据开发者自定义的options，利用Vue.extend生成对应的构造函数，从而得到对应的Vnode。而一个异步组件
//异步组件
Vue.component('async-example',function(resolve,reject){
//利用setTimeout模拟请求
setTimeout(function(){
//向`resolve`回调传递组件定义
resolve({
template:'Iamasync!'
})
},1000)
})
则是要经过一系列处理，具体过程如下
在源码的create-component。
//asynccomponent
letasyncFactory
if(isUndef(Ctor.cid)){
asyncFactory=Ctor
Ctor=resolveAsyncComponent(asyncFactory,baseCtor,context)
if(Ctor===undefined){
//returnaplaceholdernodeforasynccomponent,whichisrendered
//asacommentnodebutpreservesalltherawinformationforthenode.
//theinformationwillbeusedforasyncserver-renderingandhydration.
returncreateAsyncPlaceholder(
asyncFactory,
data,
context,
children,
tag
)
}
}
首先Ctor就与之前不同，这里为一个function
function(resolve,reject){
//利用setTimeout模拟请求
setTimeout(function(){
//向`resolve`回调传递组件定义
resolve({
template:'Iamasync!'
})
},1000)
}
之后调用resolveAsyncComponent(asyncFactory,baseCtor,context)
resolveAsyncComponent在源码的resolveAsyncComponent。
resolveAsyncComponent的主要功能是定义Ctor所需要的resolve、reject函数
//factory为Ctor factory(resolve,reject)
以resolve函数为例
constresolve=once((res:Object|Class)=>{ //缓存resolved factory.resolved=ensureCtor(res,baseCtor) //强制渲染 if(!sync){ forceRender(true) } })
once字面理解，就是只调用一次。当Ctor中setTimeout结束时调用。
ensureCtor就是Vue.extend的封装以适应不同场景，所以resolve函数的主要功能就是在异步完成时，将得到的Ctor转化为构造函数，缓存在factory.resolved中。
之后利用forceRender(true)强制重新render，由于之前缓存了factory.resolved，resolveAsyncComponent函数就直接返回了组件的构造函数。
if(isDef(factory.resolved)){
returnfactory.resolved
}
之后就与普通组件一致了。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。