vue.set（this.$set）的正确用法

下面代码animal对象，如果改变其原有属性

data () {
    return {
        animal: {
            run: '',
            jump: ''
        }
    }
}
this.animal.run = '10'
console.log(this.animal.run)	//10 可以正常触发视图更新

但是给animal对象新增一个属性，对其赋值，视图却没有更新

mounted () {
    this.animal.eat = 'meat'
}

console.log(this.animal.eat)	//meat 虽然有值，但是视图却没有渲染

原因是 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
我们需要用this.$set()方法重新将属性赋值到data对象中

this.$set(this.animal, 'eat', 'meat')

Object.defineProperty()监听到了data的变化进行逻辑操作，触发视图更新。

说明

vue3.0的双向绑定已经不再使用Object.defineProperty()，而是用的更为强大的proxy。proxy支持13种拦截方式，可以监听数组的变化，监听的是对象本身等等优点。具体可以自行查找资料了解

附

该博客仅为记录开发中一些遇到的问题及解决方案，后续还会继续更新维护。