前言

此篇文章缘起于在业务开发中需要使用父子组件嵌套,子组件的数据源来自于父级的一个接口请求,
虽然这个我们的后端同学接口有redis缓存,但是身为一个前端码农,本着挖掘的思想,开始了父子组件之间能如何优化,
避免由于数据延迟导致子组件数据为空的情况(虽然v-if判断DOM结构能实现,但是页面上会有0.5s左右的结构变化,显然不是解决问题的最终办法)

一、为什么会出现这种情况?

让我们先来看一下vue中父子组件各种生命周期的执行顺序:
1.渲染顺序

父beforeCreate=>父created=>父beforeMount=>父beforeCreate=>子created=>子beforeMount=>子mounted=>父mounted

2.子组件更新过程

父beforeUpdate=>子beforeUpdate=>子update=>父updated

3.父组件更新过程

父beforeUpdate=>父updated

4.销毁过程

父beforeDestroy=>子beforeDestroy=>子destroyed=>父destoryed

可以看出渲染时是父组件在创建之前稍微等待了一下,然后去渲染子组件,而我们如果在父组件mounted或者created里面去请求一个接口同时传值到子组件上,若接口返回数据时间过长,很容易出现子组件数据还没到就已经渲染完成的情况。总结出来部分解决办法,同时温故知新了一下Vue的动态异步组件相关知识，如下:

二、常用解决办法

1.使用v-if来判断是否有数据来展示dom结构(一般般)

这个可以说是很经典的一个办法,但是会有展示上的问题,即dom结构会先消失而后重新渲染
并不算是一个完美的解决方案,所以暂时Pass掉

2.通过$set来触发Vue的数据重新渲染机制(鸡肋)

鸡肋,大多数情况下要配合监听来使用,那么问题来了,我为什么不直接使用监听呢?

3.通过监听子组件数据源来实现子组件数据动态改变(基本完美)

watch: {filterList: { //父组件传过来的数据源deep: true,immediate: true,handler(newValue) {if (newValue) {this.$set(this, 'filterListCopy', newValue); //触发vue的重新渲染机制}},},},

值得一说的是监听属性的immediate为是否在这个监听属性挂载成功之后先执行以下handler里面的方法,以及deep为深层嵌套的对象或数组的监听,都是必须要加的
这个时候我脑海又衍生了一个新的问题:能否在组件导入配置的时候进行优化?
答案是肯定可以的,先让我们来看看Vue对异步组件挂载相关的说明:

显而易见的两个作用:
1.大大节省了JS包的大小,可以视为一个项目优化点,能看见这个组件的时候才会进行加载肯定是极美的
2.组件里面的数据会被进行缓存,下次时候可以重新进行渲染,自带自动缓存系统

它甚至支持返回promise和工厂模式在main.js进行全局封装:

我们在实际开发中可以如何优化组件引入相关的逻辑呢？
很简单,看一下你的项目如果目前组件是这种导入方式 import xxx from xxx

可以通过改为:

// 组件改为异步按需加载,不再走父子组件的生命周期,优化响应速度
Vue.component('??', () => import('@/??/??.vue'));

来实现动态加载以及异步加载,这个时候相应的组件会跳出父子组件的生命周期

前后变化

如图所示

页面默认会把所有的js文件(除导入的库),打包成一个整体的js文件,进入指定页面后进行一次性编译

配置完动态组件之后:

显而易见这些组件会被从app.js的文件里面抽离出来,在页面需要的时候跟app.js文件一起进行加载
类似于小程序分包的一个效果,是一个很不错的优化点,在业务越来越多,需求越来越多的PC端,我们需要高复用性,低耦合性组件的同时是否可以考虑使用动态组件来优化一下组件加载速度呢?

总结

好记性不如烂笔头
随时随地给自己对项目的状态进行实时的记录,想来以后回忆起来也是极美的

明天,又是充满希望的一天!

最后放上一张镇楼图

Vue进阶-异步动态加载组件相关推荐

踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
QML进阶(十)动态加载QML元素
通过搭配QML和JavaScript我们可以动态的对QML元素的生命周期进行管理.实现动态加载元素.动态实例化元素.动态销毁元素.同时我们还可以将动态创建的元素持久化到本地,并在需要的时候进行恢复使用 ...
Flex LineChart曲线——动态加载组件
最近在学习Flex 和Asp.net互操作,在网上查找了一些资料,综合后, 做出了这个动态加载组件的LineChart曲线.尚有不足之处请予以指正:谢谢. 下面是完整代码: 代码 1 <?xml ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
android listview动态加载网络图片不显示,Android Listview异步动态加载网络图片
Android Listview异步动态加载网络图片详见: http://blog.sina.com.cn/s/blog_62186b460100zsvb.html 标签: Android SDK ...
angular使用动态组件后属性值_Angular动态加载组件
引言有时候需要根据URL来渲染不同组件,我所指的是在同一个URL地址中根据参数的变化显示不同的组件:这是利用Angular动态加载组件完成的,同时也会设法让这部分动态组件也支持AOT. 动态加载组件 ...
Vue文件内动态加载JS
Vue文件内动态加载JS let jsUrl = 'https://code.jquery.com/jquery-3.4.1.min.js' // JS地址 let jqueryJs = decode ...
vue系统权限(动态加载路由方式)
目录 1.注册vue-router 2.声明默认路由和权限路由 3.用vuex实现全局登录.退出登录等方法 4.用vuex模块单独写权限路由的判断 5.监听路由跳转实现动态加载权限菜单需要用到动 ...

Vue进阶-异步动态加载组件

文章目录

前言