vue3如何设置全局过滤器、app.config.globalProperties如何使用配置

Vue3使用app.config.globalProperties注册全局属性
最新推荐文章于 2025-05-28 00:53:57 发布
原创 最新推荐文章于 2025-05-28 00:53:57 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #全局注册方法变量

博客介绍了Vue3中替代Vue2里filter的方法，即通过app.config.globalProperties注册全局可访问的属性。说明了其使用方法，还提到若全局属性与组件自身属性冲突，组件属性优先级更高，若代码添加后报错，可重启VSCode。

vue3 相比于 vue2 取消了很多的API， filter就在其中，但是我们可以使用其他方法替代vue2中的filter

通过 app.config.globalProperties 来注册一个全局都能访问到的属性

我们再来说说 app.config.globalProperties 是什么，如何使用，下面是官方给出的相关解释：

链接: vue官方文档
在这里插入图片描述

注意点：如果全局属性与组件自己的属性冲突，组件自己的属性将具有更高的优先级。
具体使用方法:
// main.js页面进行设置

const app = createApp(App);
type TestType
最低0.47元/天 解锁文章
vue3全局过滤器写法
liuhao9999的博客
05-18 2429
const app = createApp(App) // 创建实例 // 全局过滤器 app.config.globalProperties.$filters = { prefix(url) { if (url && url.startsWith('http')) { return url } else { url = `http://www.baidu.com${url}` return url } } } ...
vue2 全局批量注册过滤器 filters
全易
08-04 821
export default { numberFormatter: (num, digits) => { const si = [ { value: 1E18, symbol: 'E' }, { value: 1E15, symbol: 'P' }, { value: 1E12, symbol: 'T' }, { value: 1E9, symbol: 'G' }, { value: 1E6, symbol: 'M' }, .
Vue3新增特性 之 全局config.globalProperties和Teleport内置组件
weixin_45092437的博客
01-27 4553
1、在Vue3中，通过`createApp()`方法创造的应用实例会暴露一个 `config` 对象允许我们配置一些应用级的选项，例如全局变量。2、Teleport是 Vue 3 的新增的内置组件，用于将组件内的子节点传输/移动到整个页面 DOM 树的其他DOM节点下。其接收一个 to属性来指定传送的目标。to属性的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。
vue3.0语法例子 全局过滤器
qq_34114535的博客
11-01 488
【代码】vue3.0语法例子。
Vue3中如何使用过滤器？
有我更精彩的博客
04-25 4069
在Vue2中，我们可以使用Vue.filter()方法来定义全局过滤器，然后在模板中通过{{ value | filterName }}来使用过滤器。在上面的示例中，我们首先创建了一个Vue应用，并定义了一个data属性message，然后在methods中定义了一个自定义的过滤器函数customFilter来将文本转换为大写。总的来说，尽管Vue3中废弃了全局过滤器的概念，但是通过方法调用和柯里化函数的方式，我们依然可以实现各种各样的过滤器功能，使得Vue3中的过滤器应用更加灵活和强大。
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。...5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。 6. 全局插件：使用 `Vue.use` 可以注册
vue-cli 3 全局过滤器的实例代码详解
12-12
总结起来，Vue CLI 3 全局过滤器的创建和使用涉及到创建自定义过滤器文件、在主入口文件中注册这些过滤器以及在组件模板中调用它们来处理数据。这种方法有助于保持代码的整洁和可维护性，同时允许在整个应用中复用...
vue.config.js打包配置
老司机的后备箱
09-30 1369
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
Vue3 之 过滤器
xybhua的博客
02-07 1万+
不建议把过滤器功能做的很复杂，这违背了过滤器的设计初衷,比如：Vue.filter(‘format’, function (value, …params) {…过滤器函数总是接收表达式的值作为第一个参数，过滤器本质上是一个 JS 函数，自然可以接收多个参数。v-bind 表达式：v-bind:href=“变量 | 过滤器”双花括号：{{ 变量 | 过滤器 }}实例：为表达式的值添加前后缀的过滤器。首字母转换为大写字母的全局过滤器。过滤器本质上是一个函数，与。
vue3 中全局变量app.config.globalProperties的使用
虎康的博客
08-14 1508
如图，我们在 Utils.js文件夹下封装了自定义的方法，想要把它们注册到全局都可调用的状态，该怎么做呢？Vue3 中当我们想要把某个自定义方法放在全局，应该如何定义和使用。
Vue (三) ---------- 过滤器
在森林里麋了鹿
05-31 2216
目录一、概述二、全局过滤器的使用三、私有过滤器的使用四、过滤器的使用规则 一、概述 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单的函数。在实际项目开发中根据实际的需求，可以自己编写所需要的过滤器。 过滤器经常用在数据所需的格式化时使用 ： 例如： 字符串的格式化以及日期时间的格式化等等 过滤器最大的作用就是体现其复用性，如果我们在前端处理的某些文本信息每一次都需要经过重复的特殊处理，那么我们一定是要编写一个过滤器来使用。 二、全局过滤器的使用 全局过滤器指的是所有 vm
Vue（3）之 过滤器
热门推荐
惟忆
01-28 5万+
1、过滤器简介 1.1、全局过滤器与局部过滤器 过滤器本质上是一个函数，与自定义指令类似。 全局过滤器 Vue.filter(id, [definition]) 局部过滤器 new Vue({ el: '#app', filters: { definition(value): { ... } } }) 案例：将字符串首字母转换为大写字母的全局过滤器 Vue.filter('capitalize', function (v
vue3全局注册filters+vue2全局注册filters
Christina0109的博客
11-21 1014
vue2，vue3全局注册filters
【vue-cli 3】全局过滤器
weixin_39415598的博客
06-01 879
微信订阅号：Rabbit_svip 在vue1.x版本里是自带里几个基础的过滤器的（虽然不怎么用到）。 到了vue2.x版本之后，内置到几个过滤器就被删掉了，如果需要用到过滤器，就要开发者自己去定义。 可以把过滤器定义在某个组件内部，但这样就成了局部过滤器，在别的组件里是无法使用的。所以通常不会这么做。 也可以把过滤器写在main.js里。但如...
Vue3.0 注册全局过滤器
wengpiwang的博客
04-21 4084
问题描述 当后端将时间格式返回给前端时，给到的数据格式实际上是字符串(2022-04-17T00:00:00),而前端渲染的时候，肯定不能这样展示给用户，要根据自己的业务来展示。 解决方案： 使用day.js 编写一个转换日期格式的函数，并注入到全局过滤器中 //1.安装day.js npm install day.js //2.修改main.js代码 import dayjs from 'dayjs' //添加全局日期过滤器vue3.0的写法，2.0参考官方写法 app.confi
uni.app:VUE3使用app.config.globalProperties，进行全局方法设置及其引用
weixin_46001736的博客
01-02 2310
uni.app:VUE3使用app.config.globalProperties，进行全局方法设置及其引用
Vue过滤器
m0_61787196的博客
05-28 735
Vue过滤器
vue3之全局方法app.config.globalProperties的使用
致梦Blog
03-16 2674
vue3如何使用app.config.globalProperties定义全局方法！
vue3之全局变量app.config.globalProperties的使用
weixin_52742070的博客
03-16 2238
2、在shims-vue.d.ts声明在main.ts中定义的全局方法。3、在任意组件中使用。
我在做vue2升级vue3，这个文件内容转换的正确吗，vue2源码：import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') Vue.filter('globalFilterArray', function (value) { return value.map(item => item * 3) }) Vue.filter('globalFilterArrayTest', function (value, arg) { return value.map(item => item * arg) }) vue3转换后的代码：import * as Vue from 'vue' import { h, createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const app = createApp(App) app.use(store) app.use(router) ( app.config.globalProperties.$filters || (app.config.globalProperties.$filters = {}) ).globalFilterArray = function (value) { return value.map((item) => item * 3) } ;( app.config.globalProperties.$filters || (app.config.globalProperties.$filters = {}) ).globalFilterArrayTest = function (value, arg) { return value.map((item) => item * arg) } export const useApp = () => { return app } app.mount('#app', true)
最新发布
09-09
<think> 我们正在将Vue2代码升级到Vue3。在Vue3中，全局API和应用程序实例的使用方式发生了变化。我们需要检查转换后的代码是否符合Vue3的规范。 原始Vue2代码： ```javascript import Vue from &#39;vue&#39; import App from &#39;./App.vue&#39; import router from &#39;./router&#39; import store from &#39;./store&#39; Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount(&#39;#app&#39;) Vue.filter(&#39;globalFilterArray&#39;, function (value) { return value.map(item => item * 3) }) Vue.filter(&#39;globalFilterArrayTest&#39;, function (value, arg) { return value.map(item => item * arg) }); ``` 转换后的Vue3代码： ```javascript import * as Vue from &#39;vue&#39; import { h, createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import router from &#39;./router&#39; import store from &#39;./store&#39; const app = createApp(App) app.use(store) app.use(router) ;( app.config.globalProperties.$filters || (app.config.globalProperties.$filters = {}) ).globalFilterArray = function (value) { return value.map((item) => item * 3) } ;( app.config.globalProperties.$filters || (app.config.globalProperties.$filters = {}) ).globalFilterArrayTest = function (value, arg) { return value.map((item) => item * arg) } export const useApp = () => { return app } app.mount(&#39;#app&#39;, true) ``` 现在，我们逐步检查转换是否正确： 1. **导入方式**: - 在Vue2中，我们导入默认的Vue对象。 - 在Vue3中，我们使用`createApp`来创建应用实例。转换后的代码中，我们同时导入了整个Vue模块（`import * as Vue`）和按需导入的`h`和`createApp`。这里有一个小问题：我们实际上不需要导入整个Vue模块，因为`createApp`已经单独导入了。而且，在Vue3中，通常我们不需要显式导入`h`，因为它在渲染函数中会自动导入。但是，这里单独导入`h`也没有错误。不过，导入整个Vue模块（`import * as Vue`）可能是多余的，因为后面的代码并没有使用它。我们可以移除这一行。 2. **创建应用实例**: - Vue3中，我们使用`createApp`创建应用实例。这里正确。 3. **使用插件（Router和Store）**: - 在Vue2中，我们在Vue实例的选项中传入`router`和`store`。 - 在Vue3中，我们使用`app.use(router)`和`app.use(store)`。这里正确。但需要注意的是，Vue Router和Vuex需要相应的Vue3版本，并且它们必须支持`app.use`的安装方式。 4. **全局过滤器**: - Vue3中移除了全局过滤器的概念。在Vue2中，我们使用`Vue.filter`注册全局过滤器，而在Vue3中，我们只能通过全局属性（如`app.config.globalProperties`）来模拟，或者使用computed属性或方法。 - 转换后的代码将过滤器添加为全局属性`$filters`的方法，这是一种常见的迁移策略。但是，这里有一个问题：在模板中使用时，我们需要通过`$filters`来调用，例如`$filters.globalFilterArray(value)`，而原来的Vue2中直接使用`{{ value | globalFilterArray }}`。因此，模板中的用法也需要改变。 - 转换后的代码在设置`$filters`时使用了短路操作来确保`app.config.globalProperties.$filters`已经是一个对象。这可以接受，但也可以简化，比如先初始化`$filters`为空对象，然后逐个添加方法。 5. **挂载应用**: - Vue3中，我们使用`app.mount(&#39;#app&#39;)`来挂载。转换后的代码中，`app.mount(&#39;#app&#39;, true)`的第二个参数`true`代表什么？在Vue3的`mount`方法中，第二个参数是一个布尔值，表示是否进行hydrating（用于SSR）。在客户端渲染中，通常我们不传递第二个参数或者传递`false`。这里传递`true`可能会导致问题，除非我们确实在进行客户端激活（hydration）。通常，我们只需要传递选择器字符串。所以这里应该去掉第二个参数。 6. **导出`useApp`函数**: - 这里导出了一个函数`useApp`，返回应用实例。在Vue3中，通常我们不需要导出应用实例，因为通常在创建和挂载后，我们不会在其他地方使用它。如果是为了在组件外访问全局属性或插件，可以使用其他方法。这个导出不是必须的，但也没有错误。 7. **挂载顺序**: - 注意，在Vue3中，我们可以在安装插件之后再挂载应用。转换后的代码中，先使用`app.use`安装插件，再设置全局属性，最后挂载，这是正确的。 8. **其他**: - 在转换后的代码中，使用了分号开头（`;(`）以避免与前面的表达式合并。这是为了避免前面语句没有分号结尾时导致的错误。这是一种常见的防御性写法，可以接受。 具体修改建议： 1. 移除多余的导入：`import * as Vue from &#39;vue&#39;`（因为后面没有用到） 2. 检查是否真的需要导入`h`：在这个例子中，我们没有使用渲染函数，所以可以移除`h`的导入。但是，在`createApp`中，我们传递了`App`组件，而`App`组件可能包含渲染函数，但这是由Vue内部处理的，所以这里导入的`h`并没有被使用。可以移除。 3. 全局过滤器的设置：建议先初始化`app.config.globalProperties.$filters`为一个空对象，然后再添加方法，这样更清晰。例如： ```javascript app.config.globalProperties.$filters = { globalFilterArray(value) { return value.map(item => item * 3) }, globalFilterArrayTest(value, arg) { return value.map(item => item * arg) } } ``` 或者分两步： ```javascript app.config.globalProperties.$filters = {} app.config.globalProperties.$filters.globalFilterArray = function(value) { ... } // 另一个类似 ``` 4. 挂载时去掉第二个参数：`app.mount(&#39;#app&#39;)` 修正后的代码建议： ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import router from &#39;./router&#39; import store from &#39;./store&#39; const app = createApp(App) app.use(store) app.use(router) // 初始化全局过滤器对象 app.config.globalProperties.$filters = { globalFilterArray(value) { return value.map(item => item * 3) }, globalFilterArrayTest(value, arg) { return value.map(item => item * arg) } } // 或者使用分开的赋值（如果需要动态添加，可以分开，但这里可以直接在对象字面量中定义） // 上面已经合并为一个对象字面量，所以不需要分开赋值。 export const useApp = () => { return app } app.mount(&#39;#app&#39;) ``` 注意：在组件中使用这些过滤器时，需要改为调用`this.$filters.globalFilterArray(value)`，而不是使用管道符。 另外，关于`export const useApp = () => app`，如果你不需要在别处使用应用实例，可以去掉这个导出。 总结：原始转换代码存在一些可以改进的地方，但主要问题在于全局过滤器的处理方式（虽然模拟了，但语法上可以更简洁）和挂载时的第二个参数。另外，多余的导入可以移除。 因此，转换后的代码基本正确，但需要按照上述建议进行优化。 §§相关问题§§ 1. Vue3中如何实现全局过滤器？ 2. Vue3挂载应用时，`mount`方法的参数有哪些？ 3. 在Vue3中，如何使用全局属性来模拟Vue2的全局过滤器？ 4. Vue3中，如何正确导入和使用`createApp`？ </think> 以下是对 Vue2 到 Vue3 代码转换的详细检查分析，指出了正确之处和改进建议： ### ✅ 正确转换的部分 1. **应用实例化** ```javascript // Vue2 new Vue({...}).$mount(&#39;#app&#39;) // Vue3 ✅ 正确 const app = createApp(App) app.mount(&#39;#app&#39;) ``` 使用 `createApp` 创建应用实例是 Vue3 的标准方式[^1]。 2. **插件注册** ```javascript // Vue2 new Vue({ router, store }) // Vue3 ✅ 正确 app.use(store) app.use(router) ``` 通过 `app.use()` 注册路由和状态管理符合 Vue3 规范[^2]。 3. **全局过滤器迁移** ```javascript // Vue2 Vue.filter(&#39;globalFilterArray&#39;, ...) // Vue3 ✅ 替代方案 app.config.globalProperties.$filters.globalFilterArray = ... ``` 过滤器需通过 `globalProperties` 实现，符合 Vue3 的迁移策略[^3]。 --- ### ️ 需要改进的部分 1. **冗余导入** ```javascript import * as Vue from &#39;vue&#39; // ❌ 冗余 import { h, createApp } from &#39;vue&#39; // ✅ 但 h 未使用 ``` **建议修改：** ```javascript import { createApp } from &#39;vue&#39; // 移除未使用的 h ``` 2. **挂载参数错误** ```javascript app.mount(&#39;#app&#39;, true) // ❌ 第二个参数无效 ``` **建议修改：** ```javascript app.mount(&#39;#app&#39;) // ✅ 仅需选择器参数 ``` 3. **过滤器初始化冗余** ```javascript ;(app.config.globalProperties.$filters || (app.config.globalProperties.$filters = {})) ``` **建议优化：** ```javascript // 初始化一次即可 app.config.globalProperties.$filters = {} app.config.globalProperties.$filters.globalFilterArray = ... ``` 4. **导出应用实例的用途** ```javascript export const useApp = () => { return app } // ❓ 通常不需要导出 ``` **建议：** 仅在需要跨模块访问应用实例时保留。 --- ### ✅ 修正后的完整代码 ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import router from &#39;./router&#39; import store from &#39;./store&#39; const app = createApp(App) app.use(store) app.use(router) // 初始化过滤器对象 app.config.globalProperties.$filters = { globalFilterArray(value) { return value.map(item => item * 3) }, globalFilterArrayTest(value, arg) { return value.map(item => item * arg) } } app.mount(&#39;#app&#39;) ``` ### 迁移验证要点 1. **模板中的过滤器调用** Vue2 的 `{{ value | filter }}` 需改为 `{{ $filters.filter(value) }}` 2. **Composition API 兼容** 在 `setup()` 中使用过滤器需通过 `getCurrentInstance().proxy.$filters` 访问 3. **生命周期检查** 确保原代码中的 `beforeDestroy` 已改为 `beforeUnmount` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值