49 lines
1002 B
TypeScript
49 lines
1002 B
TypeScript
import type { Ref, ShallowRef } from 'vue';
|
|
|
|
import { shallowRef, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
|
|
|
|
function useLayoutEffect(
|
|
fn: (mount: boolean) => void | VoidFunction,
|
|
deps?: Ref<any> | Ref<any>[] | ShallowRef<any> | ShallowRef<any>[],
|
|
) {
|
|
const firstMount = shallowRef(true);
|
|
const cleanupFn = ref(null);
|
|
let stopWatch = null;
|
|
|
|
stopWatch = watch(
|
|
deps,
|
|
() => {
|
|
nextTick(() => {
|
|
if (cleanupFn.value) {
|
|
cleanupFn.value();
|
|
}
|
|
cleanupFn.value = fn(firstMount.value);
|
|
});
|
|
},
|
|
{ immediate: true, flush: 'post' },
|
|
);
|
|
|
|
onMounted(() => {
|
|
firstMount.value = false;
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (cleanupFn.value) {
|
|
cleanupFn.value();
|
|
}
|
|
if (stopWatch) {
|
|
stopWatch();
|
|
}
|
|
});
|
|
}
|
|
|
|
export const useLayoutUpdateEffect = (callback, deps) => {
|
|
useLayoutEffect(firstMount => {
|
|
if (!firstMount) {
|
|
return callback();
|
|
}
|
|
}, deps);
|
|
};
|
|
|
|
export default useLayoutEffect;
|