本文主要是介绍vue3常用代码：监听路由|mitt、project/inject无效|防抖函数|下载函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
菜鸟做项目时发现很多 vue3 常用的代码，所以来总结一下！
监听路由
import { useRoute } from "vue-router";
let router = useRoute();
watch(() => router.path,(newValue, oldValue) => {console.log("watch", newValue, oldValue);},{ immediate: true }
);
mitt、project/inject 无效
如果通信的组件是 router-view 里面 根据路由加载的 或者 路由有两层嵌套，那么不管是 mitt 还是 project/inject 都无法进行组件间的通信，因为 mitt 要能通信必须是该界面已经加载出来了！而 project/inject 不知道为什么，嵌套了两层后，第二层 router-view 里面的组件就无法获取了，会报错
[Vue warn]: injection "openmenu" not found. at <Resources onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <RouterView> at <ElMain> at <ElContainer> at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <App>
好像是因为第一层 router-view 被卸载了，所以 project 为 undefined 了！也可能是因为 provide 只能够向下进行传递数据，而路由并不相当于是其子组件！
解决方案
使用pinia、vuex等！
防抖函数 (已封装)
/*** 防抖函数* @param {function} fn* @param {number} delay* @returns {function}* 如果函数有参数，直接定义一个常量等于debounce(fn,delay)* 调用的时候直接 常量(函数参数) 就行**/
export const debounce = (fn, delay) => {let timer = null;return function () {let context = this;let args = arguments;clearTimeout(timer);timer = setTimeout(function () {fn.apply(context, args);}, delay);};
};
下载函数 (已封装)
详见：常用代码：vue必须配置的部分代码、element ui按需引入、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper、下载函数
这篇关于vue3常用代码：监听路由|mitt、project/inject无效|防抖函数|下载函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
