vue-hooks-plus/es/utils/createEffectWithTarget.js

Vue hooks library

import { ref, onUnmounted } from "vue";
import depsAreSame from "./depsAreSame";
import { getTargetElement } from "./domTarget";
const createEffectWithTarget = (useEffectType) => {
  const useEffectWithTarget = (effect, deps, target) => {
    const hasInitRef = ref(false);
    const lastElementRef = ref([]);
    const lastDepsRef = ref([]);
    const unLoadRef = ref();
    useEffectType(() => {
      var _a;
      const targets = Array.isArray(target) ? target : [target];
      const els = targets.map((item) => getTargetElement(item));
      if (!hasInitRef.value) {
        hasInitRef.value = true;
        lastElementRef.value = els;
        lastDepsRef.value = deps;
        unLoadRef.value = effect();
        return;
      }
      if (els.length !== lastElementRef.value.length || !depsAreSame(els, lastElementRef.value) || !depsAreSame(deps, lastDepsRef.value)) {
        (_a = unLoadRef.value) == null ? void 0 : _a.call(unLoadRef);
        lastElementRef.value = els;
        lastDepsRef.value = deps;
        unLoadRef.value = effect();
      }
    });
    onUnmounted(() => {
      var _a;
      (_a = unLoadRef.value) == null ? void 0 : _a.call(unLoadRef);
      hasInitRef.value = false;
    });
  };
  return useEffectWithTarget;
};
export {
  createEffectWithTarget as default
};