面试题：如何使用 Vue 手写一个过滤器？

在 Vue 2 中，过滤器（Filter）是一种用于格式化文本的工具，可以在模板中使用 | 符号对数据进行处理。

虽然 Vue 3 已经移除了过滤器的支持，但在 Vue 2 中，过滤器仍然是一个非常有用的特性。

以下是手写过滤器的步骤和示例：

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. 局部过滤器

局部过滤器只能在定义它的组件中使用。通过在组件的 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>

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>

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>

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>