一、概述
$forceUpdate可以强制Vue实例重新渲染。Vue中一些复杂对象的修改,有时并不能被Vue监听到,对于深结构的数据,可以使用$set方法使之被Vue监听,但如果不想利用$set方法去设置,也可以使用$forceUpdate方法,$forceUpdate可以使Vue组件按照最新数据重新渲染。
二、实例
<template>
<div>
<p>demo: {
{demo}}</p>
<button @click="btn">按钮</button>
</div>
</template>
<script>
export default {
data() {
return {
demo: { name: '小明' }
}
},
methods: {
btn() {
this.demo.age = '18';
this.$forceUpdate(); // 重新渲染组件, 否则demo对象添加age属性不会更新视图
}
}
}
</script>