我如何使用应与 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 上都可以使用。

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

<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');
  }
}

我们还可以按照迁移策略中的建议（以及@Naren 建议）使用全局 $filters属性。

在 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>