vue中使用$set定义响应式数据

有如下代码：

<template>
  <div class="about">
    <h1>
      {{ person }}
    </h1>
    <button @click="addAge">更新age</button>
    <button @click="addSex">直接添加性别</button>
    <button @click="setSex">$set添加性别</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      person: {
        name: '枫雨',
        age: 20,
      },
    }
  },
  methods: {
    addAge() {
      this.person.age += 1
    },
    // person对象中没有sex属性，那么直接动态添加，页面数据也不会响应，vue检测不到，页面数据不会发生变化
    addSex() {
      if (!this.person.sex) {
        this.sex = '男'
      }
    },
    // 通过$set给对象添加数据，vue就可以检测到了，页面数据也会更新
    setSex() {
      if (!this.person.sex) {
        // 参数1：要添加的对象 参数2：要添加的属性名 参数3：属性的值
        this.$set(this.person, 'sex', '男')
      }
    },
  },
}
</script>

修改原对象中的age属性，页面数据也会响应变化

直接通过 对象.属性 的方式添加一个对象中没有的属性sex，页面数据不会随person对象的改变而更新数据

通过 $set 给对象添加一个没有的属性sex，vue才会检测到，可以响应更新数据