目录
  • 通过组件的key值来刷新
  • 还有通过if来刷新
  • 通过this $forceUpdate强制重新渲染

通过组件的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强制刷新组件内容请搜索本网站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本网站！

您可能感兴趣的文章:

  • vue组件强制刷新的4种方案
  • Vue3中进行页面局部刷新组件刷新的操作方法
  • Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)
  • vue组件值变化但不刷新强制组件刷新的问题
  • Vue实现父子组件页面刷新的几种常用方法
  • vue打开子组件弹窗都刷新功能的实现
  • vue相同路由跳转强制刷新该路由组件操作
  • 解决vue更新路由router-view复用组件内容不刷新的问题
  • vue强制刷新组件的方法示例
  • Vue 实现手动刷新组件的方法
  • 使用Vue开发动态刷新Echarts组件的教程详解