一、概念
-
hook是钩子的意思，
hooks类似于封装公共方法的 js文件，实现功能的重复利用。 -
hooks清楚复用功能代码的来源, 清晰易懂 - hooks解决 mixin 的问题：
- mixins 逻辑互相嵌套，数据来源不明，且不能互相传递状态
二、hooks的命名
函数名/文件名，以use开头，形如: useXX
三、hooks的使用文章来源：https://www.toymoban.com/news/detail-619876.html
- 在
src中创建一个hooks文件夹，用来存放hook文件 - 根据功能/方法需要，可以在
hooks文件夹中新建一个文件 文件名.ts
import { useDebounceFn } from '@vueuse/core';
// type Ignore = {
// collapse?: boolean; // 忽略菜单折叠
// fullscreen?: boolean; // 忽略全屏
// splitter?: boolean; // 忽略splitter size改变
// };
type Item = 'collapse' | 'fullscreen' | 'splitter';
type Ignores = [Item] | [Item, Item] | [Item, Item, Item];
const useResize = (callback: () => any, ignore?: Ignores, initialDelay: 'infinity' | number = 0) => {
const store = useStore();
const debounceFn = useDebounceFn(callback, 300);
watch(
() => store.isCollapse,
() => {
if (ignore?.includes('collapse')) return;
debounceFn();
}
);
watch(
() => store.isFullscreen,
() => {
if (ignore?.includes('fullscreen')) return;
debounceFn();
}
);
watch(
() => store.lastSplitterUpdateTime,
() => {
if (ignore?.includes('splitter')) return;
debounceFn();
}
);
onMounted(async () => {
window.addEventListener('resize', debounceFn);
if (initialDelay !== 'infinity') {
await sleep(initialDelay);
callback();
}
});
onBeforeUnmount(() => {
window.removeEventListener('resize', debounceFn);
});
};
export default useResize;3. 在需要的地方先导入hook文件，然后在的使用文章来源地址https://www.toymoban.com/news/detail-619876.html
import useResize from '@/hooks/useResize';
到了这里，关于vue3中的hooks的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
