vue强制刷新组件的三种方法

　　目录

　　通过组件的key值来刷新

　　(当某个组件的key变化后，组件都会被重新渲染一遍)

　　扩展：vue中tab切换时请求数据重复问题

　　问题场景

　　切换tab时，会请求列表的接口，在then中进行了数据处理（添加到list后面）

　　ps:list在不同的tab中时同一个

　　快速点击tab切换时，上一个tab的请求，会在当前的tab的list中处理，导致数据不对

　　例如：

　　两个tab：成功列表 & 失败列表

　　点击成功列表后，且请求未返回时，点击失败列表：这个时候，失败列表中会出现成功列表的数据

　　解决方案：

　　大概的代码意思，不能直接复制运行的,参考意思就行

　　data() {

　　return {

　　random: new Date().valueOf(),

　　activeTab: 0,

　　list: []

　　};

　　}

　　watch: {

　　activeTab: {

　　handler(val) {

　　this.random = new Date().valueOf()

　　// 请求list

　　this.getList()

　　},

　　},

　　}

　　methods: {

　　getList() {

　　const random = this.random

　　api().then((list) => {

　　// 判断处理数据时的tab是不是没变过

　　if (this.random != random) return

　　this.list = this.list.concat(list)

　　})

　　}

　　}

　　这个只是想到的一个比较简单偷懒的方法，并不是项目中实现的最优方案。结合自己项目情况考虑为好。

　　axios 取消请求相对而言，比较麻烦，懒，小项目不想写

　　到此这篇关于vue强制刷新组件的3种方法的文章就介绍到这了,更多相关vue强制刷新组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: