由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。

我们打印后台发现，数据更改，但页面没有变化

我们发现，只有name属性有get，set，这两个属性就是双向绑定时对数据的监测和劫持的，kind属性未被监测，发生变化时也就不会展示

解决办法两种
1.this.$ser(对象,对象属性名,属性值)

<template>
  <div>{{animal.name}}</div>
  <div>{{animal.kind}}</div>
  <button @click="addKind">添加年龄属性</button>
</template>
<script>
export default {
data() {
   return {
     animal: {
       name: '小花',
     }
   }
},
methods: {
   addKind() {
     this.$set(this.animal, 'kind', 'dog')
     console.log(this.animal)
   }
}
}
</script>

2.通过Object.assign(target, sources)方法

addKind() {
     this.animals.kind= 15
     this.animals = Object.assign({}, this.animals)
   }

通过以上两种方式，我们发现kind属性也有各自的get和set方法，所以属性值的变化也能够被监测到了

vue3

在vue3中，我发现这个错误不存在了，正常做属性的添加与删除，也能够被监测到，由于打印中看见了proxy，我猜测是使用了代理的方式