快捷導(dǎo)航

vue強(qiáng)制刷新組件的三種方法

更新時(shí)間：2024年04月12日 09:38:55 作者：她說她一如既往的愛我

在Vue中,強(qiáng)制刷新組件通常涉及到以下幾種方法,本文給大家列出了常見的三種vue強(qiáng)制刷新組件的方法,感興趣的朋友跟隨小編一起看看吧

通過組件的key值來刷新

(當(dāng)某個(gè)組件的key變化后，組件都會(huì)被重新渲染一遍)

<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來刷新

(當(dāng)v-if的值發(fā)生變化時(shí)，組件都會(huì)被重新渲染一遍)

<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
	// 監(jiān)視data是否發(fā)生變化
	@Watch('data')
	watchData() {
		// 移除組件
        this.refresh = false
        // this.$nextTick可實(shí)現(xiàn)在DOM 狀態(tài)更新后，執(zhí)行傳入的方法。
        this.$nextTick(() => {
        	// 重新渲染組件
            this.refresh = true
        })
	}
}
</script>

通過this $forceUpdate強(qiáng)制重新渲染

(如果要在組件內(nèi)部中進(jìn)行強(qiáng)制刷新，則可以調(diào)用this.$forceUpdate()強(qiáng)制重新渲染組件)

<template>
	<button @click="reflush()">刷新當(dāng)前組件</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({})
export default class extends Vue {
	reflush() {
	    this.$forceUpdate()
	}
}
</script>

擴(kuò)展：vue中tab切換時(shí)請求數(shù)據(jù)重復(fù)問題

問題場景

切換tab時(shí)，會(huì)請求列表的接口，在then中進(jìn)行了數(shù)據(jù)處理（添加到list后面）

ps:list在不同的tab中時(shí)同一個(gè)

快速點(diǎn)擊tab切換時(shí)，上一個(gè)tab的請求，會(huì)在當(dāng)前的tab的list中處理，導(dǎo)致數(shù)據(jù)不對

例如：

兩個(gè)tab：成功列表 & 失敗列表

點(diǎn)擊成功列表后，且請求未返回時(shí)，點(diǎn)擊失敗列表：這個(gè)時(shí)候，失敗列表中會(huì)出現(xiàn)成功列表的數(shù)據(jù)

解決方案：

大概的代碼意思，不能直接復(fù)制運(yùn)行的,參考意思就行

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) => {
            // 判斷處理數(shù)據(jù)時(shí)的tab是不是沒變過
            if (this.random != random) return
            this.list = this.list.concat(list)
        })
    }
}

這個(gè)只是想到的一個(gè)比較簡單偷懶的方法，并不是項(xiàng)目中實(shí)現(xiàn)的最優(yōu)方案。結(jié)合自己項(xiàng)目情況考慮為好。

axios 取消請求相對而言，比較麻煩，懶，小項(xiàng)目不想寫

到此這篇關(guān)于vue強(qiáng)制刷新組件的3種方法的文章就介紹到這了,更多相關(guān)vue強(qiáng)制刷新組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: