Vue 中 filter 与 computed 的区别与用法：让数据更强大

在 Vue.js 开发中，我们常常需要对数据进行处理和转换，这时 computed 属性和 filter 就成了我们得力的助手。虽然它们都能改变数据最终呈现的样子，但它们的应用场景和工作机制却有着明显的区别。

computed 和 filter 的核心差异在于它们的角色定位 。computed 属性更像是组件内部的“数据加工厂”，它接收一些原始数据，经过一系列计算后，产出新的数据供模板使用。而 filter 则更像是一个“格式化工具”，它专门负责将数据转换成特定的显示格式，例如日期格式化、货币符号添加等。

从触发时机来看 ，computed 属性会在依赖的数据发生变化时自动重新计算，保证模板始终显示最新的结果。而 filter 只有在模板渲染过程中被调用时才会执行，它并不会主动追踪数据的变化。

举个例子 ，假设我们需要根据用户的年龄判断其是否成年。我们可以使用 computed 属性来实现：

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

在模板中，我们可以直接使用 isAdult 来控制内容的显示：

<template>
  <div v-if="isAdult">欢迎成年用户！</div>
  <div v-else>未成年用户请在家长陪同下浏览。</div>
</template>

当 user.age 发生变化时，isAdult 的值也会自动更新，从而影响模板的渲染结果。

如果我们只是想将用户的年龄显示成 “XX 岁” 的格式，则可以使用 filter：

filters: {
  ageFormat: function (value) {
    return value + ' 岁';
  }
}

在模板中，我们可以这样使用 filter：

<template>
  <p>用户年龄：{{ user.age | ageFormat }}</p>
</template>

性能方面 ，由于 computed 属性会缓存计算结果，只有依赖的数据发生变化时才会重新计算，因此它的性能通常优于 filter。而 filter 每次调用都会执行一遍转换逻辑，如果频繁使用可能会造成一定的性能损耗。

除了上述区别之外，computed 和 filter 在语法和作用域上也存在差异 。computed 属性使用函数定义，可以包含复杂的逻辑处理，而 filter 使用表达式定义，更适合简单的格式转换。computed 属性只能在组件内部使用，而 filter 可以全局注册，在任何组件中使用。

总而言之 ，computed 属性适用于需要进行复杂数据处理，并且需要缓存计算结果的场景，例如根据多个数据计算出一个新的值。而 filter 适用于简单的格式转换，例如日期格式化、货币格式化等。选择使用哪种方式取决于具体的应用场景和需求。

常见问题解答

1. computed 属性和 methods 方法有什么区别？

computed 属性是基于依赖关系缓存的，只有依赖的数据发生变化时才会重新计算，而 methods 方法每次调用都会执行一遍。因此，如果需要缓存计算结果，应该使用 computed 属性，否则使用 methods 方法。

2. filter 可以接收多个参数吗？

可以，filter 可以接收多个参数，例如：

filters: {
  formatDate: function (value, format) {
    // ...
  }
}

在模板中使用：

<template>
  <p>{{ date | formatDate('YYYY-MM-DD') }}</p>
</template>

3. 如何在组件外部使用 filter？

可以通过 Vue.filter() 方法全局注册 filter：

Vue.filter('uppercase', function (value) {
  return value.toUpperCase();
});

4. computed 属性可以异步计算吗？

不可以，computed 属性必须同步返回结果。如果需要进行异步操作，可以使用 methods 方法或 watch 监听器。

5. filter 可以修改原始数据吗？

不可以，filter 应该避免修改原始数据，它应该返回一个新的值。