16.Vue中computed、watch、filter的区别和使用场景

computed 是用来计算返回一个新值的函数，其值会被缓存，当相关依赖变化时才会重新求值。watch 是一个对象，当它里面指定的属性值发生变化时，执行对应的函数。filter 是用来过滤数据的函数，用来对数据进行处理，返回处理后的数据。computed 的使用场景是当需要对数据计算求值时，watch 的使用场景是当需要监听某个属性变化时，filter 的使用场景是当需要对数据进行过滤处理时。

相关问题

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;
    });
  }
}

vue watch 可以调用computed

Vue中的watch是一个监听器，用于在Vue实例中监听数据变化。与之相对的是computed，它也可以监听数据变化并进行计算，但与watch不同的是，computed返回的值是一个新的衍生值。而vue watch可以直接调用computed，实现响应式数据计算的同时，也提高了代码的复用性和代码的可读性。

使用watch调用computed有两种方式，第一种是给watch选项值设置为computed属性的名称：

watch: {
  computedValue(newValue) {
    console.log('computed value changed to:', newValue);
  }
},
computed: {
  computedValue() {
    return this.items.filter(item => item.isChecked).length;
  }
}

这种方式比较简单，只需要在watch选项中直接使用computed属性的名称就可以了。

第二种方式是使用深度监听：

watch: {
  items: {
    handler(newValue) {
      this.computedValue = newValue.filter(item => item.isChecked).length;
    },
    deep: true
  }
},
computed: {
  computedValue: {
    get() {
      return this.items.filter(item => item.isChecked).length;
    },
    set(newValue) {
      console.log('computed value set to:', newValue);
    }
  }
}

这种方式是在watch选项中使用items属性并设置深度监听，当items的值发生变化时，会调用handler函数重新计算computedValue的值。同时，在computed属性中设置get和set函数可以实现数据的双向绑定。

总之，使用vue watch调用computed可以方便地实现响应式数据计算，提高代码复用性和可读性。