面试题：Vue 过滤器的作用是什么？如何实现一个 Vue 过滤器？

Vue 过滤器（Filter）是一种用于格式化文本的工具，通常用于在模板中对数据进行简单的处理或格式化。过滤器可以用在插值表达式（{{ }}）和 v-bind 表达式中。

1. 过滤器的作用

过滤器的主要作用是对数据进行格式化或处理，例如：

格式化日期、时间。
格式化货币、数字。
文本截断、大小写转换。
数据过滤或排序。

优点：

将数据处理的逻辑与模板分离，使模板更简洁。
提高代码的可复用性，可以在多个地方使用同一个过滤器。

2. 如何实现一个 Vue 过滤器

方法 1：全局过滤器

通过 Vue.filter 方法定义全局过滤器，可以在任何组件中使用。

示例：

// 定义全局过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

// 在组件中使用
<template>
  <div>
    {{ message | capitalize }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
    };
  },
};
</script>

结果：

输出：Hello world

方法 2：局部过滤器

在组件的 filters 选项中定义局部过滤器，只能在该组件中使用。

示例：

<template>
  <div>
    {{ message | capitalize }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
};
</script>

结果：

输出：Hello world

方法 3：链式调用过滤器

可以同时使用多个过滤器，按顺序依次处理数据。

示例：

<template>
  <div>
    {{ message | capitalize | reverse }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
    reverse(value) {
      if (!value) return '';
      return value.split('').reverse().join('');
    },
  },
};
</script>

结果：

输出：dlrow olleH

方法 4：带参数的过滤器

过滤器可以接受参数，实现更灵活的数据处理。

示例：

<template>
  <div>
    {{ message | truncate(10, '...') }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This is a long message',
    };
  },
  filters: {
    truncate(value, length, suffix) {
      if (!value) return '';
      if (value.length <= length) return value;
      return value.slice(0, length) + suffix;
    },
  },
};
</script>

结果：

输出：This is a...

3. 过滤器的使用场景

格式化日期：将时间戳转换为可读的日期格式。
格式化货币：将数字转换为货币格式（如 $100.00）。
文本处理：截断文本、转换大小写等。
数据过滤：对列表数据进行过滤或排序。

4. 注意事项

Vue 3 中的变化：在 Vue 3 中，过滤器已被移除，推荐使用计算属性或方法来实现类似的功能。
性能问题：过滤器在每次渲染时都会执行，如果逻辑复杂，可能会影响性能。对于复杂的数据处理，建议使用计算属性。

5. Vue 3 中的替代方案

在 Vue 3 中，可以使用计算属性或方法替代过滤器。

示例：

<template>
  <div>
    {{ capitalizedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
    };
  },
  computed: {
    capitalizedMessage() {
      if (!this.message) return '';
      return this.message.charAt(0).toUpperCase() + this.message.slice(1);
    },
  },
};
</script>

总结

过滤器的作用：用于格式化或处理数据，使模板更简洁。
实现方式：
- 全局过滤器：Vue.filter。
- 局部过滤器：组件的 filters 选项。
- 链式调用：支持多个过滤器依次处理数据。
- 带参数的过滤器：支持动态配置。
Vue 3 中的替代方案：使用计算属性或方法。

在 Vue 2 中，过滤器是一个非常有用的工具，但在 Vue 3 中已被移除，推荐使用计算属性或方法来实现类似的功能。

THE END

Vue 进阶面试题