2021-12-21 Vue 中 this.$set 的用法

在 Vue 项目中会发现很多情况下，操作对象中的属性，视图层不会发生变化。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。这也是 Object.defineProperty() 的一个缺点。

解决方法就是使用 this.$set：

this.$set(obj, key, value)

其中 obj 是具体对象名，key 是对象中某个属性名， value 是你需要赋的值

<script>
export default {
 data() {
   return {
     person: {
       name: 'Jae',
     }
   }
 },
 methods: {
   change() {
     this.$set(this.person, 'age', 22)
     console.log(this.person)
     // { name: 'Jae', age: 22 }
   }
 }
}
</script>