vue页面数据更新

在Vue中，视图和数据是双向绑定的，当数据发生变化时，视图会自动更新。一般情况下，我们只需要修改数据，视图会自动更新。但是，在某些情况下，可能需要手动触发视图的更新。

Vue提供了两种方式来手动更新视图：

1. 使用 `$forceUpdate()` 方法强制更新视图

`$forceUpdate()` 方法会强制组件重新渲染，触发视图的更新。但是，这种方式适用于单个组件，如果需要更新多个组件的视图，就需要在每个组件中都调用 `$forceUpdate()` 方法，比较麻烦。

2. 修改数据的方式

在Vue中，当数据发生变化时，视图会自动更新。我们可以通过修改数据的方式来触发视图的更新。Vue提供了一些方法来修改数据：

- `this.$set(object, key, value)`：用于给对象添加属性并设置属性值。
- `this.$delete(object, key)`：用于删除对象的属性。
- 直接修改对象的属性值。

例如，我们有一个数据对象：

data() {
  return {
    name: 'Tom',
    age: 18
  }
}

如果需要更新 `name` 属性的值，可以直接修改：

this.name = 'Jerry'

这时候，视图会自动更新。

如果需要添加一个新的属性 `sex`，可以使用 `$set` 方法：

this.$set(this, 'sex', 'male')

这时候，视图也会自动更新。

如果需要删除 `age` 属性，可以使用 `$delete` 方法：

this.$delete(this, 'age')

这时候，视图也会自动更新。