Vue 数组和对象更新,但是页面没有刷新的解决方式

当 Vue 组件渲染后，数组和对象更新时，Vue 会检测到更改并自动更新视图。但是有些时候，我们手动地更新数组或对象，可能不会触发视图的更新，这时候需要手动触发一下更新，本文将为你提供完整的解决方案。

解决方法

Vue 提供了 vm.$set、vm.$delete 方法来修改数组或对象中的元素，以保证视图的响应式。

Vue 数组更新的解决方法

假设我们有以下 data：

data() {
  return {
    list: ['A', 'B', 'C']
  }
}

如果我们使用以下代码增加一个元素：

this.list.push('D')

由于 Vue 无法检测到数组的变化，页面不会刷新，此时我们可以使用 vm.$set 方法：

this.$set(this.list, this.list.length, 'D')

$set 方法的第一个参数是对象，第二个参数是要更新的属性名称或数组索引，第三个参数是新值。

另外一种方法是将原数组复制到一个新数组中并更新该数组，然后在将新数组赋值会原来的数组：

const newList = [...this.list, 'D']
this.list = newList

这样修改原数组之后，Vue 会检测到变化，自动更新视图。

Vue 对象更新的解决方法

假设我们有以下数据：

data() {
  return {
    user: {
      name: 'John',
      age: 20
    }
  }
}

我们可以使用以下代码更新 user 对象的某个属性：

this.user.age = 21

由于 Vue 无法检测到对象的变化，页面不会刷新，此时我们可以使用 vm.$set 方法：

this.$set(this.user, 'age', 21)

还有另一种方法是将原对象复制到一个新对象中，并更新该对象，然后将新对象赋值给原来的对象：

const newUser = Object.assign({}, this.user, {age: 21})
this.user = newUser

这样修改原对象之后，Vue 会检测到变化，自动更新视图。

示例说明

示例 1

假设我们有以下数据：

data() {
  return {
    list: ['A', 'B', 'C']
  }
}

我们可以使用以下代码更新 list 数组：

this.list.push('D')
this.list[0] = 'X'

由于 Vue 无法检测到数组的变化，页面不会刷新。此时我们可以使用 vm.$set 方法：

this.$set(this.list, this.list.length, 'D')
this.$set(this.list, 0, 'X')

或者通过将原数组复制到新数组并更新该数组来解决：

const newList = ['X', ...this.list.slice(1), 'D']
this.list = newList

示例 2

假设我们有以下数据：

data() {
  return {
    user: {
      name: 'John',
      age: 20
    }
  }
}

我们可以使用以下代码更新 user 对象的某个属性：

this.user.age = 21

由于 Vue 无法检测到对象的变化，页面不会刷新。此时我们可以使用 vm.$set 方法：

this.$set(this.user, 'age', 21)

或者通过将原对象复制到新对象并更新该对象来解决：

const newUser = Object.assign({}, this.user, {age: 21})
this.user = newUser

总结

使用 Vue 开发过程中，如果手动修改数据无法触发视图刷新，可以使用 vm.$set 方法或者将原数据赋值为一个更新了的新数据，以保证视图响应式。