vue强制刷新组件的三种方法
作者：她说她一如既往的爱我
在Vue中,强制刷新组件通常涉及到以下几种方法,本文给大家列出了常见的三种vue强制刷新组件的方法,感兴趣的朋友跟随小编一起看看吧
通过组件的key值来刷新
(当某个组件的key变化后，组件都会被重新渲染一遍)
<template>
<el-table
:data="data"
:key="refresh"
>
...
</el-table>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
refresh= true
@Watch('data')
watchData() {
this.refresh= !this.refresh
}
}
</script>还有通过if来刷新
(当v-if的值发生变化时，组件都会被重新渲染一遍)
<template>
<el-table
v-if="refresh"
:data="data"
>
...
</el-table>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
refresh = true
// 监视data是否发生变化
@Watch('data')
watchData() {
// 移除组件
this.refresh = false
// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
this.$nextTick(() => {
// 重新渲染组件
this.refresh = true
})
}
}
</script>通过this $forceUpdate强制重新渲染
(如果要在组件内部中进行强制刷新，则可以调用this.$forceUpdate()强制重新渲染组件)
<template>
<button @click="reflush()">刷新当前组件</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
reflush() {
this.$forceUpdate()
}
}
</script>扩展：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强制刷新组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！