Vue3不再支持全局过滤器，推荐使用组件内方法替代

Vue3不再支持全局过滤器，推荐使用组件内方法替代

引用

CSDN

1.

https://blog.csdn.net/blog_programb/article/details/105603350

Vue3对全局过滤器这一特性进行了重大调整，不再支持Vue2中常见的全局过滤器注册和使用方式。本文将详细介绍这一变化的原因，并提供在Vue3中实现类似功能的替代方案。

Vue2中的全局过滤器

在Vue2中，可以通过Vue.filter方法注册全局过滤器。例如，创建一个名为capitalize的全局过滤器：

Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})

也可以通过只传递过滤器名称来检索已存在的过滤器定义：

var capitalizeFilter = Vue.filter('capitalize');

在内部，Vue会通过以下方式初始化过滤器选项：

Vue.options['filters'] = Object.create(null);

Vue3中的变化

在Vue3中，全局过滤器这一特性已被移除。因此，不再存在专门用于移除全局过滤器的方法。如果需要改变数据展示方式，推荐在组件内部定义方法来替代过滤器功能。例如：

import { createApp } from 'vue';
const app = createApp({
    data() {
        return {
            message: 'Hello, World!'
        };
    },
    methods: {
        // 定义本地方法作为过滤器逻辑
        customFilter(value) {
            return value.toUpperCase();
        }
    }
});
app.mount('#app');

对于需要动态更改或删除转换规则的情况，可以考虑将这些逻辑重构到计算属性（computed properties）或组合式API（Composition API）中进行管理。

为什么移除全局过滤器？

Vue3移除全局过滤器的主要原因在于设计上的调整。为了提升灵活性与组件的独立性，推荐的方法是从直接使用全局过滤器转变为利用方法调用来实现相同的效果。这种方法的优势包括：

• 增强了代码模块化程度
• 减少了不同部分之间的耦合度
• 让测试变得更加简单易行

如果确实存在类似全局过滤器的需求，可以通过其他方式（如混合式组合、插件机制或是自定义指令）来达成目的。

替代方案示例

使用计算属性

<template>
  <div>{{ formattedMessage }}</div> <!-- 使用计算属性 -->
</template>
<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  computed: {
    // 计算属性作为替代方案之一
    formattedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

使用方法

<template>
  <div>{{ reverseMessage(message) }}</div> <!-- 使用方法 -->
</template>
<script>
export default {
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    // 方法调用也是另一种选择
    reverseMessage(message) {
      return message.split('').reverse().join('')
    }
  }
}
</script>

Composition API

Vue3引入的Composition API提供了一种全新的组合式函数风格编写逻辑复用代码的方法，使状态管理变得更加直观简单。例如：

import { ref, onMounted } from 'vue';
export function useFeature() {
    const count = ref(0);
    
    onMounted(() => {
        console.log('Component mounted');
    });
    return { count };
}

Vue3的其他性能优化

Vue3在性能方面也进行了显著优化：

1. 新的编译器优化技术：减少了运行时需要执行的工作量，减小了最终打包文件大小，加快了加载速度和初始渲染时间。
2. 更高效的虚拟DOM实现方式：Vue3对比Vue2拥有更好的静态树提升、更少的对象创建以及更快的打补丁过程，有助于减少内存占用并加速更新操作。
3. 组件初始化阶段的懒加载策略：得益于Suspense和更好的异步组件支持，在路由切换或其他条件满足之前不会实例化未使用的子组件，从而降低了初次访问页面的整体耗时。
4. Composition API：使状态管理变得更加直观简单，间接促进了应用整体响应性的改善。