Vue3使用globalProperties全局过滤器处理字符串返回空值的原因排查

问题根源 #

Vue3彻底移除了过滤器（Filters）语法，模板里的{{ data.title | snap }}这种管道符调用方式在Vue3中已经不再被支持。你虽然在globalProperties上挂载了$filters对象，但模板无法识别管道符语法，自然无法触发snap方法，最终返回空值。

解决方法 #

有两种实用的替代方案：

方案1：全局方法+模板直接调用 #

把过滤器改成全局方法，在模板里直接调用即可：

1. 修改main.js的全局挂载方式：

import './assets/main.css'
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 直接挂载全局方法
app.config.globalProperties.$snap = (val) => {
  if (!val || typeof val !== 'string') return "";
  return val.slice(0, 5);
};

// 也可以保留$filters对象，后续通过$filters.snap调用
// app.config.globalProperties.$filters = {
//   snap(val) {
//     if (!val || typeof val !== 'string') return "";
//     return val.slice(0, 5);
//   }
// };

app.mount('#app');

2. 调整模板的调用写法：

<template>
  <h1>HOOKS</h1>
  <table>
    <tr>
      <th>userId</th>
      <th>id</th>
      <th>title</th>
      <th>body</th>
    </tr>
    <tr v-for="(data, index) in GetDatas" :key="index">
      <td>{{ data.userId }}</td>
      <td>{{ data.id }}</td>
      <!-- 对应全局方法的调用 -->
      <td>{{ $snap(data.title) }}</td>
      <!-- 如果用$filters对象，就这么写 -->
      <!-- <td>{{ $filters.snap(data.title) }}</td> -->
      <td>{{ data.body }}</td>
    </tr>
  </table>
</template>

方案2：组件内定义局部方法/计算属性 #

如果这个字符串截取逻辑只在当前组件使用，更推荐在组件内直接定义方法：

<template>
  <h1>HOOKS</h1>
  <table>
    <tr>
      <th>userId</th>
      <th>id</th>
      <th>title</th>
      <th>body</th>
    </tr>
    <tr v-for="(data, index) in GetDatas" :key="index">
      <td>{{ data.userId }}</td>
      <td>{{ data.id }}</td>
      <td>{{ snapTitle(data.title) }}</td>
      <td>{{ data.body }}</td>
    </tr>
  </table>
</template>

<script setup>
// 这里省略GetDatas的数据获取逻辑
const GetDatas = [];

// 组件内的局部方法
const snapTitle = (val) => {
  if (!val || typeof val !== 'string') return "";
  return val.slice(0, 5);
};
</script>

额外说明 #

Vue3移除过滤器的核心原因是，它的功能完全可以被方法调用或计算属性替代，后者更符合JavaScript的常规写法，也避免了额外语法糖的学习成本。

内容的提问来源于stack exchange，提问作者kealaxshan