Vue 强制刷新(重新渲染)的方式

1. 强制刷新整个页面
2. 使用v-if
3. 使用组件内置的forceUpdate方法
4. 使用key-changing优化组件

1、强制刷新整个页面

this.$router.go(0);
window.location.reload();

2、使用v-if

<template>
    <div v-if="show">xxx</div>
    <el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        refresh() {
            this.show = false;
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.show = true;
            });
        }
    }
}
</script>

3、使用组件内置的forceUpdate方法

<template>
    <div>xxx</div>
    <el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        refresh() {
            this.$forceUpdate();
        }
    }
}
</script>

4、使用key-changing优化组件

<template>
    <div :key="key>xxx</div>
    <el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {
    data() {
        return {
        	key: 1
        }
    },
    methods: {
        refresh() {
            this.key++;
        }
    }
}
</script>