给一个对象添加新属性的时候，新添加的属性不是响应式的

在给一个对象添加新属性的时候，新添加的属性不是响应式的，可以用$set

<div>姓名：{{person.name}}</div>
<div>性别：{{person.sex}}</div>

export default {
    data() {
      return {
        person: {
            name: '小明'
        }
      }
   },
   mounted() {
      this.person.sex = "男"
      console.log(this.test)
   }
 }

页面显示为：

但是打印能够打印出来sex属性

 

 为了解决这个问题，可以用$set方法

$set的三个参数：this.$set(添加属性的对象，添加的属性，添加的属性值)

  mounted() {
    // this.person.sex='男'
    this.$set(this.person, 'sex', "女")
    console.log(this.person)
  }