Vue—组件实例之$forceUpdate

一、概述

$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>