面试题：你了解 Vue 中的过滤器吗？它有哪些应用场景？

什么是 Vue 中的过滤器？

Vue 中的过滤器（Filter）是一种用于格式化文本的工具，可以在模板中对数据进行简单的处理。过滤器通过管道符 | 使用，常用于格式化日期、货币、文本等。

过滤器的定义和使用

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>

2. 局部过滤器

在组件选项中定义局部过滤器，仅在该组件中可用。

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

3. 链式调用

可以串联多个过滤器，按顺序处理数据。

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

<script>
export default {
  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('');
    }
  },
  data() {
    return {
      message: 'hello world'
    };
  }
};
</script>

过滤器的应用场景

格式化日期
将时间戳或日期字符串格式化为可读的日期格式。

Vue.filter('formatDate', function (value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString();
});

格式化货币
将数字格式化为货币形式。

Vue.filter('currency', function (value) {
  if (!value) return '';
  return `$${value.toFixed(2)}`;
});

文本截断
对长文本进行截断并添加省略号。

Vue.filter('truncate', function (value, length) {
  if (!value) return '';
  if (value.length <= length) return value;
  return value.slice(0, length) + '...';
});

大小写转换
将文本转换为大写或小写。

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

数据过滤
对列表数据进行过滤。

Vue.filter('filterBy', function (items, search) {
  if (!search) return items;
  return items.filter(item => item.includes(search));
});

过滤器的注意事项

Vue 3 中已移除
在 Vue 3 中，过滤器已被移除，官方推荐使用计算属性或方法代替。
性能问题
过滤器在每次渲染时都会执行，如果逻辑复杂或数据量大，可能会影响性能。
复用性
过滤器适合简单的文本格式化，复杂的逻辑建议使用计算属性或方法。

替代方案（Vue 3）

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

计算属性

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

方法

export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  methods: {
    capitalize(value) {
      if (!value) return '';
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
};