this.$set在vue中的使用

背景：我在写前端项目的时候，后端给了我们一个json对象，我已经渲染到页面上了。但是因为自己的需要，想给返回的对象添加一个字段，所以使用push添加一个字段，添加是添加了，但是页面渲染没有变化。后来才意识到它没有响应。如果我们要让这个新的字段响应式，在前端训练技术中vue的数据中声明或赋值的对象或数组时，需要使用this.$set来注入数据（数组中的值是一个对象）),向对象添加新属性。如果更新此属性的值，则不会更新视图。使用this.$set(target,key,value)target：表示数据源，就是你要操作的数组或对象，key：要操作的字段，value：改变后的数据，举个小例子：添加一个对象年龄属性并使其响应变化当我们不用的时候this.$set添加对象属性时，效果：确实添加了数据，但是页面没有响应式渲染age属性。当我们使用this.$set(this.list,'age',18)添加属性时。效果：我们可以看到添加的数据是有响应的。为什么它可以响应？仔细一看，this.$set多了getage和setage方法，这也是它可以响应式的原因。分析Vue的响应式原理，传入一个Vue实例作为JavaScript对象的数据选项，Vue会遍历所有这个对象。属性，并使用Object.defineProperty将所有这些属性转换为getters/setters。这些getters/setters对用户是不可见的，但在内部它们允许Vue跟踪依赖项并在访问和修改属性时通知更改。这里需要注意的是，不同的浏览器在控制台打印数据对象时，getter/setter的格式不同。下图来自官方文档。