网站建站的基本步骤,龙口有没有做网站的,湖州做网站公司哪家好,深圳手机商城网站设计价格更详细的hooks了解参考这个大佬的文章#xff1a;掘金#xff1a;Hooks和Mixins之间的区别 刚开始我简单看了几篇文章感觉Hooks这个东西很普通#xff0c;甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯… 更详细的hooks了解参考这个大佬的文章掘金Hooks和Mixins之间的区别 刚开始我简单看了几篇文章感觉Hooks这个东西很普通甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯定不是白给的所以我开始在我的项目里面不停的操作、试验demo所以我发现了一些他使用非常舒服的点
一、首先阅读性很好
就比如这里很清晰就能知道我是从外部引入进来的hooks函数和变量
二、其次你可以在hooks中引入vue3的api
像我这里我自己在hooks中使用了这三个api进行业务操作
三、多文件引入变量互相隔离
这个特性其实是需要看你是怎么写的我推荐是在hooks中export一个默认函数然后在函数中进行生命周期、api等等逻辑操作看我的例子
export function useShortcut() {const shortcutInfo reactive({ctrlKey: false,shiftKey: false,altKey: false,},);function test() {shortcutInfo.q1213 asfdasdf;}return {shortcutInfo,test,};
}这样就能保证在不同文件引入后变量不会出现互相污染的问题了
四、注意事项
在vue文件中对hooks进行引入后要解构出来再使用
以下错误示范❌
import { useShortcut } from ./hooks/useShortcutKeys;
setInterval(() {useShortcut().test();console.log(shortcutInfo, useShortcut().shortcutInfo);
}, 2000);
正确示范
import { useShortcut } from ./hooks/useShortcutKeys;
const { shortcutInfo, test } useShortcut();setInterval(() {test();console.log(shortcutInfo, shortcutInfo);
}, 2000);我的test方法是更改shortcutInfo的值只有在我正确示范这个例子下才能正常获取更改后的shortcutInfo值因为你的变量是定义在方法中的。如果每次都是通过这个方法返回值取值出来(useShortcut().shortcutInfo❌)的变量都是新的变量
