Vue动态组件和异步组件

nanchen2251 发布于2019-08-23 14:57 / 1302人阅读

摘要：动态组件如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如页，那么给我们提供动态组件。实现动态组件的加载。的值可以是一个已经注册的组件的名字或者一个组件的选对象。

动态组件

如果我们打算在一个地方根据不同的状态引用不同的组件的话，比如tab页，那么Vue给我们提供动态组件。

基本使用

Parent.vue

运行结果如下图：

当我们点击不同的按钮时，下面会切换不同的组件。实现动态组件的加载。is 的值可以是一个已经注册的组件的名字或者一个组件的选对象。当我们点击按钮时，这个按钮的 disabled 为 true 然后我们将给这个按钮一个active 的css类,同时改变 currentCom 的值

keep-alive:动态组件的缓存

如果我们需要频繁的切换页面，每次都是在组件的创建和销毁的状态间切换，这无疑增大了性能的开销。那么我们要怎么优化呢？
Vue提供了动态组件的缓存。keep-alive 会在切换组件的时候缓存当前组件的状态，等到再次进入这个组件，不需要重新创建组件，只需要从前面的缓存中读取并渲染。

Parent.vue(其余地方代码和上面一样)

Childs1.vue

Childs2.vue

运行结果如下图：

"

对比：如果我们将去掉，运行结果如下图：

前一组图片在切换组件的时候，title从1加到3，然后等下次再切换回来的时候,title还是停留在3，从控制台可以看出，Childs1.vue这个组件的mounted的钩子函数只有一次。后一组图片，title一开始加到3，下一次进入这个组件的时候title又从1开始，控制台图片也显示这个组件经历个了多次钩子函数，说明组件是销毁重建的。

tips:因为缓存的组件只需要建立一次，所以如果我们要在每次进入组件的钩子函数里面做相应的操作的时候，会出现问题，所以请明确我们使用的场景，避免出现bug

异步组件

异步组件存在的意义在于加载一个体量很大的页面时，如果我们不设置加载的优先级的话，那么可能页面在加载视频等信息的时候会非常占用时间，然后主要信息就会阻塞在后面在加载。这对用户来说无疑不是一个很差的体验。但是如果我们设置加载的顺序，那么我们可以优先那些最重要的信息优先显示，优化了整个项目。一般来说我们是将加载组件和路由（vue-router）配合在一起使用，所以这里我就不细讲了，具体学习可以参考官网来进行学习。

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101408.html

Vue动态加载异步组件

摘要：目前采用动态加载异步组件的方式来实现小组件之间的通信。内容使用过的都应该知道的动态加载组件通过来绑定需要加载的组件。总结本篇主要借助的动态组件和打包单文件来实现动态加载异步组件，通过的事件总线挂载在上来实现平级组件之间的通信。背景：目前我们项目都是按组件划分的，然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。项目中我们还是会碰到一些通用的组件跟业务之间有通信，这种...

awesome23 2019-08-26 13:22 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

褰辩话 2019-08-01 17:30 评论0 收藏0
VueJS 如何编译服务器端远程模板【异步组件+简单方法】

摘要：，常规组件，卒。小结总之呢，上面分析了在中编译远程模板的可能性，最后得出了两种方法异步组件，应该是官方的推荐方法动态组件，变通之法，论坛上发现的思路当然如果有其他方法欢迎交流，本文如果有不严谨不正确的地方也欢迎指出本文发自我的，原文链接我的说明有些时候你可能需要从后台获取模板，并在前台在自己编译，这在用 AngularJS 1.x 的时候似乎很常见，可以直接用 ng-include...

2i18ns 2019-08-20 19:00 评论0 收藏0
利用VUE异步组件、动态加载组件，实现自定义组件顺序、动态绑定传入子组件的props、动态绑定监听子

摘要：发现了动态组件异步组件这个东西简直是救命啊动态组件异步组件思路分析有了动态组件这个东西之后，我们就可以根据绑定不同的值来渲染不同的组件。每个组件要传给子组件的值和接收子组件的事件也可以动态的绑定上去。推动我实现这个功能的业务背景最近接到一个让我很头疼的需求：产品要求我们系统页面上所有的模块都支持顺序的变动。比如有模块A、B、C、D，可以无序的展示在页面上，我刚听到这个需求的时候我...

marser 2019-08-26 10:30 评论0 收藏0
Vue.js的动态组件模板

摘要：实例组件模板某些网页中用于多个位置，例如通知，注释和附件。动态组件模板另一种方法是使用某种加载器来加载您需要的模板。那么这里发生了什么默认情况下，支持动态组件。超级方便安装我们的组件后，我们尝试加载模板。组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。实例：组件模板某些网页中用于多个位置，例如通知，注释和附件。让我们来一起看一下评论，看一下我表达...

Richard_Gao 2019-08-23 13:42 评论0 收藏0