VUE：data中数据改变页面没渲染

在写代码过程中，有时会出现修改了data中某个Obj后，改变页面却没有重新渲染的情况。

例如：

<div>
      {{testObj}}
</div>

data() {
      return {
        testObj: {
          name: '张三'
        }
      }
    },
    methods: {
      add() {
        this.testObj.age = '18岁'
      }
    }

在方法 add（）执行后 testObj 并没有渲染出 age

原因：
Vue在创建页面时，会先遍历 data 中的数据，并为它们设置 getter 和 setter方法，以此作为实现数据双向绑定的基础。

但是，testObj 在声明时并没有 age 属性。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

解决方案：

1. Vue.set(object, key, value) 使用set方法为对象添加属性

add() {
        this.$set(this.testObj, 'age', '18岁')
      }

使用set方法后，Vue会先为新增加的属性添加 getter 和 setter方法，并且重新渲染数据

2. this.$forceUpdate() 强制刷新 data并重新渲染

add() {
        this.testObj.age = '18岁'
        this.$forceUpdate()
      }

并不太推荐使用这种方式，频繁使用可能会出现页面闪烁