Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说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>

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。