vue中this.$set的用法：解决视图数据不更新问题

探讨Vue.js中对象属性添加与更新的局限性及解决方案，包括使用this.$set方法和this.$forceUpdate强制更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在使用vue进行项目开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去。

这是因为当vue中的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

如下代码，给person对象新增age属性：

data () {
  return {
    person: {
      name: 'mark',
      gender: '男'
    }
  }
}
// mounted钩子函数，在实例挂载之后调用，一般用于页面初始化
mounted () {
  this.person.age = 18
}

当我们在页面上想渲染age属性值时并不能使用，原因是受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，而属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的，所以此时就需要用到 this.$set 。

正确的写法应该是：

mounted () {
  this.$set(this.person, "age", 18)
}

简单说下 this.$set(target, "key", "value") 的三个参数：

① 要改变的目标对象（也可以是数组）

② 要更改的对象中的属性（或者数组中某个元素的索引）

③ 重新赋的值

还有一种解决方案：使用 this.$forceUpdate() 进行强制更新。

如有不足，欢迎补充！