Vue 强制刷新(重新渲染)的方式
Vue 强制刷新(重新渲染)的方式
·
- 强制刷新整个页面
- 使用v-if
- 使用组件内置的forceUpdate方法
- 使用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>
更多推荐
已为社区贡献2条内容
所有评论(0)