Vue 3：全局过滤器已被移除，使用全局方法代替

一、 Vue 2：使用 Vue.filter 方法注册全局过滤器。

在uni-app项目main.js编辑

// Vue 2 中注册全局过滤器
import Vue from 'vue';
import App from './App.vue';
import * as filters from './filters';

// 注册全局过滤器
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key]);
});

Vue.config.productionTip = false;
App.mpType = 'app';
const app = new Vue({
  ...App
});
app.$mount();

二、Vue 3：全局过滤器已被移除，使用app.config.globalProperties全局方法代替

// Vue 3 中注册全局方法
import { createSSRApp } from 'vue';
import App from './App.vue';
import filters from './plugins/filters';

export function createApp() {
  const app = createSSRApp(App);

  // 使用插件注册全局方法
  app.use(filters);

  return {
    app
  };
}

三、封装和遍历注册过滤器的原因：

封装和遍历注册过滤器或方法的主要目的是为了代码的可维护性和可扩展性。通过将所有过滤器或方法集中在一个文件中，你可以更方便地管理和维护它们。

假设你有多个过滤器：

// filters.js
export function hotNumber(numStr) {
  const num = parseFloat(numStr);
  if (isNaN(num)) {
    return numStr;
  }
  if (num < 1000) {
    return numStr;
  }
  const kNum = Math.floor(num / 1000);
  return `${kNum}k`;
}

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

通过遍历注册，你可以一次性注册所有过滤器或方法：

// plugins/filters.js
import * as filters from '../filters';

export default {
  install(app) {
    Object.keys(filters).forEach((key) => {
      app.config.globalProperties[`$${key}`] = filters[key];
    });
  }
};

四、全局过滤器的使用场景

通常用于模板中对数据进行格式化。例如，日期格式化、字符串截断等。

<template>
  <div>
    <p>{{ someDate | formatDate }}</p>
  </div>
</template>

五、全局方法的使用场景

在组件中调用一些常用的工具函数。例如，数据转换、计算等。

<template>
  <div>
    <p>{{ $hotNumber(data.views) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        views: 12345
      }
    };
  }
};
</script>

总结：

• Vue 2：使用 Vue.filter 注册全局过滤器，适用于模板中的数据格式化。
• Vue 3：使用 app.config.globalProperties 注册全局方法，适用于在组件中调用常用工具函数。
• 封装和遍历注册：提高代码的可维护性和可扩展性，便于管理多个过滤器或方法。