场景:

一个群发消息列表(数组)

列表下有多条消息(元素)

每条正在发送的消息数据状态需要实时刷新,发送完成时需要显示成功提示符合且不需要刷新,然后3秒消失。首次显示列表时,已经成功的状态不显示这个成功提示符。

1、定位确定采用局部刷新

2、进入消息列表请求获取列表数据的接口,完成发送的消息不需显示完成状态

3、正在发送的消息首次渲染时就调用setTimeout轮询刷新当前消息的接口,完成时,显示完成状态(新增一个完成状态的字段)

4、页面销毁时,还在发送的消息也取消刷新

误区:

1、每条消息没有抽成一个单独的组件,想要首次渲染组件调用刷新接口时,只能通过定义全局map变量来映射每条消息的刷新接口的定时器,明显增加业务开发的复杂度,增加了一些不确定性的bug风险。

每条消息抽成组件之后,就可以在组件中的mounted中去调用刷新的接口,页面销毁时取消刷新可以在destroyed里面去销毁。

2、这里的一个误区是在destroyed里面去清除定时器的id,导致调用了destroyed钩子刷新的定时器还是无法清除。将定时器id当做一个属性值存在了每条数据所属的对象中,然后在子组件(每条消息所属的)中的destroyed中去读取该对象的当前的定时器属性,因为读出来是undifined,其实并没有拿到当前消息正在执行的定时器,所以清除不掉。

组件使用有误,每一个组件都是一个独立的元素,其中定义的变量也是私有的,定时器id定在当前组件的data中就可以了,不需要再在数组中的每一条消息中定一个专属的定时器id。

抽象出来的简单版刷新数据,5秒后取消刷新。

let intervalId = null
function init() {
this.refresh()
} function refresh() {
intervalId = setTimeout(() => {
this.getRefreshData()
}, 2000);
} function getRefreshData() {
console.log('start get data.....', intervalId)
setTimeout(() => {
console.log('get data.....')
this.refresh()
}, 100); } function stopRefresh() {
console.log('stop....', intervalId)
clearInterval(intervalId)
} this.init()
setTimeout(() => {
this.stopRefresh()
}, 5000);

problem:vue组件局部刷新,在组件销毁(destroyed)时取消刷新无效问题的更多相关文章

  1. 用vue写一个仿app下拉刷新的组件

    如果你用vue弄移动端的页面,那么下拉刷新还是比较常见的场景,下面来研究如何写一个下拉刷新的组件(先上图); 由于节省大家的时间,样式就不贴出来了. html结构也不必介绍了,直接看代码吧-.- &l ...

  2. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  3. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  4. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  5. [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick

    思路: 1. 组件的好处,重用性 2. 组件对的slot用法 3. 子如何调用父的数据 4. 子如何触发父的方法执行 5. 父如何触发子的方法执行 6. 如何创建组件和销毁自建--如何缓存避免每次切换 ...

  6. Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  7. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  8. vue自定义组件(vue.use(),install)+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  9. Vue创建局部组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java中如何设置表格处于不可编辑状态

    代码片段如下: 这样的话就可以将表格设置为不可编辑状态

  2. 菜鸟脱壳之脱壳的基础知识(二) ——DUMP的原理

    菜鸟脱壳之脱壳的基础知识(二)——DUMP的原理当外壳的执行完毕后,会跳到原来的程序的入口点,即Entry Point,也可以称作OEP!当一般加密强度不是很大的壳,会在壳的末尾有一个大的跨段,跳向O ...

  3. 解决Gephi导入csv文件时提示“边表格需要一个包含节点标号‘源’和‘目标’列” 问题的两个方案

    1.将csv文件在Excel中打开,并重新保存为csv. 2.将csv文件导入到sqlite,使用sqlite作为数据来源. 标准格式如下

  4. django2_开发web系统接口

    1.单独创建.../sign/views_if.py文件,开发添加发布会接口 from django.http import JsonResponse from cmdb.models import ...

  5. jquery 获取表单的内容以JSON对象形式返回

    添加一个serializeJson方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  6. 搜狗浏览器或者360浏览器安装chrome 浏览器插件

    https://www.cnblogs.com/ingvar/p/6403777.html#undefined

  7. RabbitMQ使用介绍及实例

    消息列队不做过多解释了,直接讲讲rabbitmq的基本概念和路由模式. 一.安装及基本概念 rabbitmq是基于erlang编写的,所以安装rabbitmq之前需要安装erlang的环境,配置环境变 ...

  8. 浅谈URI和URL

    URI(Uniform Resource Identifier)字面上的意思是,统一资源标示符 URL(Uniform Resource Locator),统一资源定位符 光从字面上的意思,这个2个东 ...

  9. git的基本用法——我的日常使用

    git的基本用法 一,前言 网上有太多关于git的用法说明,而我看得云里雾里,可能是本人比较愚笨.平常时间老问别人又觉得很不好意思,估计大多的同学们都是自己解决.后来我想到了买一本书,淘宝上git书籍 ...

  10. JS两个页面通过URL传值

    1.传递参数: window.location.href = "./list.html?id="+id; 1.接收参数: (1)接收参数函数封装 function GetReque ...