Javascript 不推荐使用错误筛选器如何在vue.js 3中解决此错误

我试图使用vue.js 3中的过滤器将数据过滤成大写，但此错误显示任何过滤器？！！我尝试了很多解决方案，但没有办法

main.js：

import Vue from "vue";
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./scss/main.scss";
import "normalize.css";

createApp(App).use(store).use(router).mount("#app");

    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount("#app");
    
    Vue.config.productionTip = false;
    
    Vue.filter('uppercase', function (v){
       return v.toUpperCase()
    });

我使用的组件过滤器：

<template>
    <div class="post-box">
        <span class="views">{{ views }}</span>
        <h3 class="title">{{title}}</h3>
        <span class="date">{{ date }}</span>
        <p class="content">{{ content }}</p>
        <div class="row">
          <div class="col-sm-6 author">
            <span class="post-author">{{author | uppercase }}</span>
          </div>
          <div class="col-sm-6 category">
            <span class="post-category">{{category}}</span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      props: ['title','content','author','category','date','views'],
      name: "BlogPost",
    };
    </script>

{{views}
{{title}}
{{date}}
{{content}
{{作者|大写}}
{{category}}
导出默认值{
道具：['title'、'content'、'author'、'category'、'date'、'views']，
名称：“博客帖子”，
};

---

您能帮助我吗

解决方案是使用计算属性，而不是在vue 3中删除的过滤器： 在main.js中，从“Vue”中删除

导入Vue

并：

new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount("#app");
    
    Vue.config.productionTip = false;
    
    Vue.filter('uppercase', function (v){
       return v.toUpperCase()
    });

在子组件中，定义该属性并在模板中使用，如下所示：

<template>
     ...
          <div class="col-sm-6 author">
            <span class="post-author">{{ uppercase(author) }}</span>
          </div>
     ...
    </template>
    
    <script>
    export default {
      props: ['title','content','author','category','date','views'],
      name: "BlogPost",
      computed:{
         uppercase(){
            return (v)=>{
              return v.toUpperCase()
              }
           }
     }
    };
    </script>

...
{{大写（作者）}}
...
导出默认值{
道具：['title'、'content'、'author'、'category'、'date'、'views']，
名称：“博客帖子”，
计算：{
大写（）{
返回值（v）=>{
return v.toUpperCase（）
}
}
}
};

当我删除（从“Vue”中导入Vue）并使用computed进行编辑时，页面显示错误“Vue”未定义。我应该添加（从“Vue”中导入Vue），感谢它现在在main.js中起作用。您混合了Vue 2和Vue 3语法，导致冲突