vuewatch和computed和filter

在 Vue.js 中，`watch`、`computed`和`filter` 都是用来处理数据的常用方式。

- `watch`：用于监听一个特定的数据变化，当该数据发生变化时执行相应的操作。`watch` 可以监听一个表达式或一个函数返回值，并在数据变化时执行回调函数。`watch` 通常用于监听数据变化后执行异步操作或复杂的数据处理。

- `computed`：用于计算和返回一个新的数据，当依赖的数据发生变化时自动更新。`computed` 可以监视依赖的数据，当依赖的数据发生变化时，自动更新计算属性的值，因此不需要手动监听数据变化。`computed` 通常用于计算多个数据的复杂逻辑。

- `filter`：用于过滤一个数组中的数据，返回一个新的数组。`filter` 接收一个回调函数，该回调函数返回一个布尔值，用于指示是否保留该数据。`filter` 通常用于从一组数据中筛选需要的数据。

举个例子，如果有一个 `data` 中包含一个 `name` 和一个 `age` 属性，我们可以使用 `watch` 监听 `name` 和 `age` 的变化，并在它们发生变化时执行某些操作：

watch: {
  name: function(newValue, oldValue) {
    // name 发生变化了
  },
  age: function(newValue, oldValue) {
    // age 发生变化了
  }
}

如果我们想根据 `name` 和 `age` 计算一个新的属性 `fullName`，我们可以使用 `computed`：

computed: {
  fullName: function() {
    return this.name + ' ' + this.age;
  }
}

如果我们有一个数组 `users` 包含多个用户对象，我们可以使用 `filter` 过滤出年龄大于等于 18 的用户：

computed: {
  adultUsers: function() {
    return this.users.filter(function(user) {
      return user.age >= 18;
    });
  }
}