我如何使用应该与 Vue 3 兼容的 Vue 2 过滤器

Question

我正在使用 Vue js 2 + 版本，并且根据我的要求，我创建了一个用于日期格式的过滤器，但我听说在 Vue 3 中过滤器被删除了，而是需要使用计算或方法这里的问题我怎么能写一个版本 2 和版本 3 的兼容版本

我写的 Vue js 2 过滤器

<ul>
       
  <li v-for="(info, index) in data">
     {{info.time.data | Filter}}
  <li>
<ul>

过滤请求：

    filters: {
  Filter(date){
     return moment.unix(date).utc().format('HH:mm a');
    
    }
  },

我如何编写可用于版本 2 和 3 的兼容方法

Answer 1

如此处所述https://v3.vuejs.org/guide/migration/filters.html#overview - 使用管道运算符的过滤器在 Vue 3 中不起作用，必须用方法或计算属性替换。

如果您将 timeFilter 放入 methods 并且 Vue 2 和 Vue 3更改您的模板，将 pipe 替换为 method call.

但是计算属性可能会得到更好的优化，因为它应该缓存值（如果输入值未更改，则操作较少）。

<ul>
  <li v-for="(info, index) in data" :key="index">
     {{ timeFilter(info.time.data) }}
  <li>
<ul>

methods: {
  timeFilter(date) {
     return moment.unix(date).utc().format('HH:mm a');
  }
}

我们还可以使用 global $filters 属性，如 migration strategy 中所建议的（以及 @Naren 所建议的）。

在 Vue 2 和 Vue 3 模板中：

<ul>
  <li v-for="(info, index) in data" :key="index">
     {{ $filters.timeFilter(info.time.data) }}
  <li>
<ul>

在 Vue 3 中：

// main.js
const app = createApp(App);

app.config.globalProperties.$filters = {
   timeFilter: date => moment.unix(date).utc().format('HH:mm a')
}

在 Vue 2 中：

Vue.prototype.$filters = {
   timeFilter: date => moment.unix(date).utc().format('HH:mm a')
}

Answer 2

Vue 3 不支持过滤器，根据 Vue 文档：Filters are removed from Vue 3.0 and no longer supported. 但是您仍然可以使用 computed properties 作为数据更改侦听器，否则 methods 就足够了。如果你想在全球范围内注册它们，可以像下面那样使用

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
   timeFilter: (date) => moment.unix(date).utc().format('HH:mm a')
}

<ul>
  <li v-for="(info, index) in data">
     {{ $filters.timeFilter(info.time.data) }}
  <li>
<ul>

我如何使用应该与 Vue 3 兼容的 Vue 2 过滤器

How can i use filter using Vue 2 which should be compatible for Vue 3

javascript

vue.js

vue-filter