🎯 UniApp扩展Vue全局过滤器功能讲座

大家好，欢迎来到今天的讲座！今天我们要聊的是如何在UniApp中扩展Vue的全局过滤器功能。如果你已经熟悉了Vue的基本用法，那么你一定知道过滤器（Filters）是一个非常方便的功能，可以帮助我们在模板中格式化数据。不过，UniApp对Vue的原生过滤器做了一些调整，所以我们需要一些额外的步骤来实现全局过滤器。

📚 什么是过滤器？

首先，让我们回顾一下什么是过滤器。过滤器可以在模板中使用，用于格式化数据。比如，你想把一个日期字符串转换成更易读的格式，或者把一个数字转换成货币格式，都可以使用过滤器。

<!-- Vue 模板中的过滤器示例 -->
<p>{{ message | capitalize }}</p>

在上面的例子中，capitalize 是一个自定义的过滤器，它会将 message 的首字母大写。

🛠️ 在Vue中定义全局过滤器

在Vue 2.x中，你可以通过 Vue.filter() 方法来定义全局过滤器。比如：

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

然后你可以在任何组件中使用这个过滤器，而不需要重复定义。

😱 但是，UniApp有点不一样

虽然UniApp是基于Vue的，但它并不是完全等同于Vue。UniApp为了兼容多个平台（如微信小程序、H5、App等），对Vue的某些特性做了调整。特别是从Vue 3.x开始，过滤器已经被移除了，UniApp也跟随了这一趋势。

不过别担心，我们仍然可以通过其他方式来实现类似的功能！

方案一：使用计算属性（Computed Properties）

计算属性是Vue中非常强大的功能，它可以替代过滤器的作用。你可以将需要格式化的逻辑放在计算属性中，然后在模板中直接使用。

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

然后在模板中使用：

<p>{{ capitalizedMessage }}</p>

这种方式的好处是，计算属性会在依赖的数据发生变化时自动更新，而且代码更加直观。

方案二：使用方法（Methods）

如果你不想使用计算属性，还可以通过定义方法来实现类似的效果。方法的优势在于你可以传递参数，灵活性更高。

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

然后在模板中调用方法：

<p>{{ capitalize(message) }}</p>

方案三：使用混合（Mixins）

如果你想在多个组件中复用过滤器逻辑，可以考虑使用混合（Mixins）。混合允许你将一组公共的逻辑提取出来，然后在多个组件中共享。

// filters.js
export const globalFilters = {
  methods: {
    capitalize(value) {
      if (!value) return ''
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
    formatPrice(value) {
      if (!value) return '0.00'
      return `$${parseFloat(value).toFixed(2)}`
    }
  }
}

然后在组件中引入并使用：

import { globalFilters } from './filters'

export default {
  mixins: [globalFilters],
  data() {
    return {
      message: 'hello world',
      price: 123.456
    }
  }
}

在模板中：

<p>{{ capitalize(message) }}</p>
<p>{{ formatPrice(price) }}</p>

方案四：使用插件（Plugins）

如果你想要更全局的方式来管理过滤器，可以创建一个插件。插件可以让你在应用启动时注册一些全局的方法或属性。

// plugin.js
export default {
  install(Vue) {
    Vue.prototype.$filters = {
      capitalize(value) {
        if (!value) return ''
        return value.charAt(0).toUpperCase() + value.slice(1)
      },
      formatPrice(value) {
        if (!value) return '0.00'
        return `$${parseFloat(value).toFixed(2)}`
      }
    }
  }
}

然后在 main.js 中引入并使用插件：

import Vue from 'vue'
import App from './App'
import FiltersPlugin from './plugin'

Vue.use(FiltersPlugin)

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})

app.$mount()

现在你可以在任何地方通过 this.$filters 来访问这些过滤器：

<p>{{ $filters.capitalize(message) }}</p>
<p>{{ $filters.formatPrice(price) }}</p>

📝 总结

虽然UniApp不再支持Vue 2.x中的全局过滤器，但我们有多种替代方案来实现类似的功能。你可以根据自己的需求选择最合适的方式：

• 计算属性：适合简单的数据格式化，依赖数据变化时自动更新。
• 方法：适合需要传递参数的情况，灵活性高。
• 混合：适合在多个组件中复用逻辑。
• 插件：适合全局管理过滤器，适用于大型项目。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎在评论区留言，我们可以一起探讨更多有趣的开发技巧 😊

---

参考文档（非链接形式）

• Vue.js 官方文档 – Computed Properties and Watchers
• Vue.js 官方文档 – Mixins
• Vue.js 官方文档 – Plugins
• UniApp 官方文档 – 组件与API

祝你编码愉快，再见！👋