最近在用echar做一个前端柱状图如图
其中echar被写成了纯组件
<div class="chart-wrapper"> <bar-chart :close-flag="closeFlag" :sort-field="queryParams.sortField" :sort-flag="queryParams.sortFlag" :week = "isoWeekData.weeks" :team="'TP'" :equipment = "queryParams.equipment"/> </div>
组件bar-chart的数据获取核心方法为getInfo,现在想实现3秒定时获取信息。
好,我们将面对以下几个问题:
1.我们的核心路由设置已经全局cache,除了手动reload(F5外)无法刷新当前页面,普通的JSload 放弃(体验太差)
<keep-alive>
<router-view :key="key" /> </keep-alive>
2. 因为全局的keep-alive,固页面的beforeDestory, 以及 destory都是无效方法,页面是不会被摧毁的
3. 第二点的解决方法很简单,在组件的调用页面我们可以很轻松的实现路由进出来实现desrory等方法的相同实现,类似这样
beforeRouteEnter(to,from,next){ console.log("enter") next(vm => { vm.timer = setInterval(function(){ vm.getData() } , 3000); }) }, beforeRouteLeave(to, from, next) { console.log("leave") clearInterval(this.timer); this.timer = ''; next() },
4.但是,在组件内部,不仅destory相关方法无效,就连路由判定都失效(因为VUE的组件加载机制),这样问题就来了:我们想象的组件是一套完成的构架,包括数据源获取都一定想写在组件内部,那么怎么才能实现呢?
OK,解决方法是组件属性监听:
1.在组件内部添加字段:
props:
closeFlag:{ type: Boolean, default: false }
然后watch:
closeFlag: {
handler(newVal, oldVal) { console.log("监控了") if(newVal){ console.log("Close Timer") clearInterval(this.timer); this.timer = null; }else{ console.log("Check Timer") if(this.timer != null) return; console.log("Setup Timer") let that = this; this.timer = setInterval(function(){ that.getInfo() } , 3000); } }, deep: true //对象内部属性的监听,关键。 },
让我们回到调用组件的页面
beforeRouteLeave(to, from, next) { console.log("出去了UI") this.closeFlag = true; next() }, beforeRouteEnter(to,from,next){ console.log("进来了UI") next(vm => { vm.closeFlag = false; }) },
最后在调用组件的界面初始化监听值:
closeFlag:null,
一定要为null,而不为false(让全局第一次进入可以正确初始化timer)
让我们看看效果:
breadcrumb.vue?7ced:29 /operator/home/processcontrol/pareto
BarChart.vue?f42a:156 监控了
BarChart.vue?f42a:162 Check Timer
BarChart.vue?f42a:164 Setup Timer
7BarChart.vue?f42a:182 获取数据!
index.vue?6ced:106 出去了UI
breadcrumb.vue?7ced:29 /operator/home/processcontrol
BarChart.vue?f42a:156 监控了
BarChart.vue?f42a:158 Close Timer
index.vue?6ced:111 进来了UI
breadcrumb.vue?7ced:29 /operator/home/processcontrol/pareto
BarChart.vue?f42a:156 监控了
BarChart.vue?f42a:162 Check Timer
BarChart.vue?f42a:164 Setup Timer
220BarChart.vue?f42a:182 获取数据
完美解决!!
(PS 现在为什么无法保存图片了?)
相关推荐
最开始我是将定时器声明在组件内部的(由于页面不多,数据关联也不太强,所以项目中没有使用store进行数据管理),后来清除的时候发现无法清除,后来索性声明到window下了。然后在组件内部写了如下代码: 发现也没...
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
/* 页面数据缓存 */ var _CACHE_OBJS = {}; function _init_cache(comp, key, cache) { var obj = cache[key]; if (obj !== undefined) { comp[key] = obj; } var deep = typeof comp[key] === 'object'; comp...
在vue-route路由组件中进行分页
本文实例讲述了vue路由缓存的几种实现方式。分享给大家供大家参考,具体如下: 在我们的日常开发中,有时候会遇到页面的缓存,特别是电商的项目,在商品列表的一些状态都是要缓存下来的。 下面就简单介绍几种 vue ...
如果定位不支持ES2015的浏览器: 您可能需要重新考虑,因为在这种情况下最好不要使用Web组件。用法dist/vue-wc-wrapper.js :此文件为ES模块格式。 这是捆绑程序的默认导出,可以在带有<script type="mo
主要介绍了Vue中组件的缓存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
Vue组件,用于Vue组件的延迟渲染,改善初次进入页面或者数据量较大的页面操作时出现卡顿的情况
Web__Vue组件和路由基础.mp4
首先假设项目中有两个路由Profile和Posts,按写法把他们定义为一层路由,是Root的子路由,因此Root中要有router-view组件去承载子路由,才能实现子路由切换展示 一层路由 Root容器 <h1>Ro
说到页面缓存,在vue中那就不得不提keep-alive组件了,keep-alive提供了路由缓存功能,本文主要基于它和vuex来实现应用里的页面跳转缓存。 vuex里维护一个数组cachePages,用以保存当前需要缓存的页面。 keep-al
使用vue3开发时钟、倒计时组件组件,实现电子时钟、钟表、农历、秒表、定时器及各种预定义样式等。封装为组件,可直接调用,通过参数可指定样式、效果、动画时间等。提供实例源码、开发过程视频及实现过程。 使用...
在vue-route路由组件中进行分页
Vue 组件间传值及事件回调
刮刮卡vue组件,可在PC或移动端使用
vue2的路由和store的应用,非常的详细 vue2的路由和store的应用,非常的详细 vue2的路由和store的应用,非常的详细 vue2的路由和store的应用,非常的详细 vue2的路由和store的应用,非常的详细 vue2的路由和store的...
主要介绍了解决vue路由name同名,路由重复的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
springBoot集成vue-admin-template实现动态路由所使用的数据库数据sql
vue组件的路由高亮问题解决方法 前言 之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active。后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是...
vue3+webpack+vue-router路由封装+axios封装+vuex封装,下载资源中包括了vue3+webpack+vue-router路由封装+axios封装+vuex封装的相关代码,分别对vue-router路由进行了封装,对axios进行了封装,对vuex进行了封装,...