Vue_(组件通讯)动态组件结合keep-alive

最新推荐文章于 2020-11-08 12:00:03 发布
最新推荐文章于 2020-11-08 12:00:03 发布
阅读量67 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/1138720556Gary/p/10468290.html
版权

 

 

　　keep-alive　　传送门

 

 

　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

　　当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

　　主要用于保留组件状态或避免重新渲染

　　

　　include - 字符串或正则表达式。只有名称匹配的组件会被缓存
　　exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
 

　　Learn

　　　　一、不使用<keep-alive>包裹动态组件

　　　　二、使用<keep-alive>包裹动态组件

 

　　目录结构

　　

 

 

 

一、不使用<keep-alive>包裹动态组件

　　此时组件A、B、C组件中的数会一直随机0~100且不重复

        <div id="GaryId">
            <button @click="selectedName = 'my-component-a'"> a </button>
            <button @click="selectedName = 'my-component-b'"> b </button>
            <button @click="selectedName = 'my-component-c'"> c </button>
            

                <component :is="selectedName"></component>

        </div>

 

　　　　"my-component-a":{
                        template:"<h1>A :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                        }
                    },

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <button @click="selectedName = 'my-component-a'"> a </button>
            <button @click="selectedName = 'my-component-b'"> b </button>
            <button @click="selectedName = 'my-component-c'"> c </button>
            
                <component :is="selectedName"></component>

        </div>
    </body>
    
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
            
            new Vue({
                data:{
                    selectedName:'my-component-a'
                },
                components:{
                    "my-component-a":{
                        template:"<h1>A :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                        }
                    },
                    "my-component-b":{
                        template:"<h1>B :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                        }
                    },
                    "my-component-c":{
                        template:"<h1>C :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                    }
                }
            }
            }).$mount("#GaryId");
    </script>
</html>
Gary_dynamic_component.html

 

 

二、使用<keep-alive>包裹动态组件

　　此时组件A、B、C组件中的数会第一次会随机出现，随后保存到缓存中，第二次再点击的时候它们会读取缓存中的数

        <div id="GaryId">
            <button @click="selectedName = 'my-component-a'"> a </button>
            <button @click="selectedName = 'my-component-b'"> b </button>
            <button @click="selectedName = 'my-component-c'"> c </button>
            
            <keep-alive>
                <component :is="selectedName"></component>
            </keep-alive>
        </div>

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <button @click="selectedName = 'my-component-a'"> a </button>
            <button @click="selectedName = 'my-component-b'"> b </button>
            <button @click="selectedName = 'my-component-c'"> c </button>
            
            <keep-alive>
                <component :is="selectedName"></component>
            </keep-alive>
        </div>
    </body>
    
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
            
            new Vue({
                data:{
                    selectedName:'my-component-a'
                },
                components:{
                    "my-component-a":{
                        template:"<h1>A :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                        }
                    },
                    "my-component-b":{
                        template:"<h1>B :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                        }
                    },
                    "my-component-c":{
                        template:"<h1>C :{{num}}</h1>",
                        data(){
                            return{
                                num:Math.ceil(Math.random()*100)
                            }
                    }
                }
            }
            }).$mount("#GaryId");
    </script>
</html>
Gary_dynamic_component.html

 

　　当只想缓存A组件

            <keep-alive include="my-component-a">
                <component :is="selectedName"></component>
            </keep-alive>

 

　　当想缓存A组件和B组件时候

            <keep-alive :include="['my-component-a','my-component-b']">
                <component :is="selectedName"></component>
            </keep-alive>

 

　　排除缓存A组件和B组件的时候

            <keep-alive :exclude="['my-component-a','my-component-b']">
                <component :is="selectedName"></component>
            </keep-alive>

 

转载于:https://www.cnblogs.com/1138720556Gary/p/10468290.html

weixin_30354675
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue手撸移动端后台（9）keepalive和页面通信
暴躁兔子的记录
05-13 529
前面我们知道了如果获取数据，如何删除数据。但是有个小问题，我们每次进入列表页面的时候，都会重新去获取数据，这个不太美好，如果数据变化不是那么快的场景，完全没有必要浪费网络资源。 目标： 首次进入列表加载数据 返回首页，再次进入列表，不加载新数据 用户顶部下拉，加载新数据 滑动到底部，加载旧数据 子页面，或者其他页面对列表数据删除，返回列表页查看数据已经删除 1. keepalive 为了使...
VUE之组件（组件通信、单向数据流）及VUE之组件（动态组件及keep-alive）
lwaner的博客
10-23 477
VUE之组件（组件通信、单向数据流） 组件通信 从父组件向子组件通信，通过 props 传递数据就可以了，但 Vue 组件通信的场景不止有这一种，归纳起来，组件之间通信可以用下图表示。 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 本节主要介绍下常见父子通信的方法。 单向数据流 单向数据流是父子组件的核心概念，props是单向绑定的。 当父组件的属性发生变化的时候，会传导到子组件。但...
Vue路由开启keep-alive时的注意点
大灰狼的小绵羊哥哥的博客
03-15 1万+
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。 HTML部分： template> div class="
vue中的 keep-alive组件【 实现组件跳转的状态保留，也是vue优化的一种方式】
IT1125275074的博客
09-29 563
原理： keep-alive 提供了两个生命钩子，分别是 activated 与 deactivated。 因为 keep-alive 会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的 created 等方法，需要用 activated 与 deactivated 这两个生命钩子来得知当前组件是否处于活动状态。 <keep-alive> &...
vue-router路由元信息及keep-alive组件级缓存
有梦想的咸鱼前端
09-28 302
　　路由元信息？（黑人问号脸？？？）是不是这么官方的解释很多人都会一脸懵？那么我们说meta，是不是很多人恍然大悟，因为在项目中用到或者看到过呢？ 　　是的，路由元信息就是我们定义路由时配置的meta字段；那么这个meta的作用是什么呢？ 　　首先看一个场景： 　　　　通常我们在开发网站或者移动应用的时候，我们通常会有网页权限验证的需求（别说你没有，你肯定有），这种需求一般是指需要登录后才可...
vue keep-alive 动态删除组件缓存的例子
12-13
3、当前组件的route-view,外层包裹keep-alive，include用你从仓库里面取出来的数组 4、关闭标签页(也就是后退路由的时候)，清空store里的数组 总结：通过动态的设置include（要缓存的组件）的数组，来动态的控制...
vue里如何主动销毁keep-alive缓存的组件
10-17
主要介绍了vue里如何主动销毁keep-alive缓存的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue组件 keep-alive 和 transition 使用详解
10-16
2. **`transition`组件**：`transition`主要用于实现Vue组件的过渡效果。它可以是CSS过渡、CSS动画或JavaScript钩子函数。`transition`不会渲染额外的DOM元素，仅对包裹的内容应用过渡效果。例如： ```html ...
vue keep-alive以及activated,deactivated生命周期的用法和created钩子的区别
qq_23159841的博客
06-19 1244
<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 当组件在<keep-alive>内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行。 也就是activated和deactivated必要和<keep-alive>配套使用才会生效。 而当组件使用keep-alive的时候created钩子函数只会被执行一次。 注意:当在activated钩子里面使用axios调用接...
ET服务器框架学习笔记
kylinok的博客
11-08 3517
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、ET服务器怎么看？二、APP部分1.program代码2.game3.回到program总结欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowch
Vue.js - 在动态组件上使用 keep-alive
wust_cyl的博客
10-09 934
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。 看如下例子 &lt;div id="app"&gt; &lt;div class='container'&gt; &lt;div class='row'&gt; &lt;button class='btn btn-defa...
Vue中keep-alive保持状态
千里小马哥的博客
02-09 434
1.在router-view外嵌套keep-alive标签； 2.在组件中设置一个属性保存路由； 3.在组件actived函数中将路由push到this.$router中； 4.在beforeRouterLeave中将概述性更新。 demo： <keep-alive exclude="Profile"> <router-view></route...
vue keep-alive保存状态
Aimee的博客
04-16 5229
使用vue的keep-alive属性设置页面保存状态 应项目需求，开发一个类似app的移动端H5项目，有tabbar标签切换，并需要保存当前状态。之前对vue学习不够全面，并不了解keep-alive属性，再查询各种资料，终于看到了keep-alive，简单好用，不禁感叹vue真是强大。 keep-alive定义 keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存...
Vue2.0 心法 ==> 第三层：keep-alive 缓存之坑
鹿的迷雾林的博客
11-23 7635
初学vue2.0，发现自己智商不够用啊。 最近在路由缓存处又遇到一个坑。 由于整个项目是同事构建的，我只负责开发定位监控页。在此处有一个需求，所有路由都要用到keep-alive缓存，而其中一个地图路由不能有缓存。
vue动态组件component（keep-alive）
weixin_44705688的博客
07-13 1251
vue动态组件component 在vue开发中遇到复杂的页面时我们会使用很多组件来减轻整个页面的压力，这是我们需要引入所需要的全部组建，并在页面中一个个的写入，有时还要根据不同的情况显示不同的组件，当数量多起来就相当麻烦，这是我们使用动态组件就能很好的解决问题。 <template> <div class="preview-tabs"> <component :is="tab"></component> <button @click="
keep-alive 组件级缓存
angliliu2521的博客
07-23 164
前言 在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态， 它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期。 但有时候，我们有一些需求，比如跳转到详情页面时，需要保持列表页的滚动条的深度，等返回的时候依然在这个位置，这样可以提高用户体验。 在Vue中，对...
JS每日一题:vue中keepalive怎么理解？
weixin_34306593的博客
02-14 578
20190212问 vue中keepalive怎么理解？ 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 github.com/vuejs/vue/b… 什么是keepalive 我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时， 也不会进行重新init keepalive音译过来就是保持活...
vue 如何使某个组件不被 keep-alive 缓存
小皮咖的博客
10-28 1万+
提出问题 最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！ 分析问题 这是因为 keep-alive 将路由页面缓存，所以该路由没有完成整个生命周期，没有 destroyed，因此重新进入也没有触发其他生命周期钩子，如 created 等。 解决问题（1）. 查看官方文档
vue组件通信，点击传值，动态传值（父传子，子传父）
热门推荐
Dreamer_xr的博客
10-23 2万+
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！ 一、父组件传子组件，核心--props 下面是场景，点击传值给子组件 在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...
vue keep-alive 组件
最新发布
05-01
`keep-alive` 组件是 Vue.js 内置的一个抽象组件，它可以用来缓存动态组件或者组件的状态，从而在组件切换时可以保留之前组件的状态，避免重新渲染和销毁组件，提升页面性能。 使用 `keep-alive` 组件非常简单，只...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值