90设计供稿平台任务aso优化报价

前言

在使用 Vue 时，多个地方使用同一个方法导致每个地方都需要按需引用，从而增加代码量。然而，这种做法实际上有助于减少冗余、提高一致性，并且是代码重用、抽象或模块化的体现。这种方法提高了代码的维护性、可读性和一致性。

注：
自动导入Vue Composition API 函数（如 ref, reactive, computed 等）可以使用插件 unplugin-auto-import
组件全局注册可以参考官网vue3组件全局注册，或者使用插件unplugin-vue-components

一、app.config.globalProperties

一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。

1 注册实例

在 main.js 中引入全局要使用的实例，通过 app.config.globalProperties 添加到全局中

//main.js文件
const app = createApp(App)
app.config.globalProperties.$Text = '111'

//使用的组件
<script setup>
import { getCurrentInstance } from 'vue'   const { proxy } = getCurrentInstance()
console.log(proxy.$Text);  //111 </script>

2 注册方法

同理也是可以注册方法的
这里写了个防抖函数，关于防抖函数可以参考这里Vue中使用防抖和节流

//main.js文件
import { debounce } from "./util"
const app = createApp(App)
app.config.globalProperties.$Debounce = debounce

//使用的组件
<template><button @click="clickeMe">点击我</button>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const Debounce = proxy.$Debounce 
const clickeMe = Debounce(async () => {console.log("await我被点击了");//这里写需要的代码
}, 1000);
</script>

参考官网：app.config.globalProperties

二、依赖注入（Provide / Inject）

提供一个值，可以被后代组件注入。

1 注册实例

<script setup>
//APP.vue 
import {provide} from 'vue'
provide('text', '111')
</script>

//使用的组件
<script setup>
import { inject } from 'vue'const text = inject('text')
console.log(text); //111
</script>

2 注册方法

这里一样的用防抖来举例

<script setup>
//APP.vue 
import {provide} from 'vue'
import { debounce } from "./util"
provide('debounce', debounce)
</script>

//使用的组件
<script setup>
<template><button @click="clickeMe">点击我</button>
</template><script setup>
import { inject } from 'vue'
const debounce = inject('debounce')
const clickeMe = debounce(async () => {console.log("await我被点击了");//这里写需要的代码
}, 1000);
</script> 

效果图

可以看到多次点击后1s内执行了一次

3 一次性多次传入

在 Vue 3 中，provide 函数本身不支持一次性传递多个值。但可以通过将多个值包装在一个对象中，来实现类似的效果。这样可以通过单个 provide 调用传递多个参数。
代码示例：

//APP.vue 
import { debounce } from "./util"
const values = {text: '111',debounce: debounce
};
provide('values', values)

//使用的组件
<template><button @click="clickeMe">点击我</button>
</template><script setup>
import { inject } from 'vue'const values = inject('values')
const { debounce, text } = values
const clickeMe = debounce(async () => {console.log("await我被点击了"); //这里写需要的代码
}, 1000);
console.log(text); //111
</script>

参考Vue3官网：组合式 API：依赖注入

最后

参考文档：Vue3 MaskerFan 博客园