useEffect 和 Vue3 API 对比

useCallback 和 useMemo 在某种程度上类似于 Vue 3 中的 computed，而 useEffect 则包含了 Vue 3 中的 onMounted、onUpdated、watchEffect 和 watch 等 API 的功能。以下是对这些钩子和 Vue 3 中对应 API 的详细对比和解释：

useCallback 和 useMemo 类似于 Vue 3 中的 computed

useCallback

useCallback 用于记忆化回调函数，避免在每次渲染时创建新的函数实例。

import { useCallback } from "preact/hooks";

const memoizedCallback = useCallback(() => {
  // 回调函数逻辑
}, [依赖项]);

useMemo

useMemo 用于记忆化计算结果，避免在每次渲染时重新计算。

import { useMemo } from "preact/hooks";

const memoizedValue = useMemo(() => {
  // 计算逻辑
  return 计算结果;
}, [依赖项]);

Vue 3 中的 computed

在 Vue 3 中，computed 用于创建计算属性，类似于 useMemo 和 useCallback 的功能。

import { computed } from "vue";

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

useEffect 类似于 Vue 3 中的 onMounted、onUpdated、watchEffect 和 watch

useEffect

useEffect 用于在组件渲染后执行副作用。它可以模拟 Vue 3 中的 onMounted、onUpdated、watchEffect 和 watch。

import { useEffect } from "preact/hooks";

// 模拟 onMounted
useEffect(() => {
  // 组件挂载时执行
  console.log("Component mounted");
}, []);

// 模拟 onUpdated
useEffect(() => {
  // 组件更新时执行
  console.log("Component updated");
});

// 模拟 watchEffect
useEffect(() => {
  // 依赖项变化时执行
  console.log("Dependencies changed");
}, [依赖项]);

// 模拟 watch
useEffect(() => {
  const handle = setInterval(() => {
    console.log("Interval running");
  }, 1000);

  return () => clearInterval(handle); // 清理副作用
}, []);

Vue 3 中的 onMounted、onUpdated、watchEffect 和 watch

• onMounted：在组件挂载时执行。
• onUpdated：在组件更新时执行。
• watchEffect：在依赖项变化时执行。
• watch：监听特定的响应式数据变化。

import { onMounted, onUpdated, watchEffect, watch, ref } from "vue";

const count = ref(0);

// 模拟 onMounted
onMounted(() => {
  console.log("Component mounted");
});

// 模拟 onUpdated
onUpdated(() => {
  console.log("Component updated");
});

// 模拟 watchEffect
watchEffect(() => {
  console.log("Dependencies changed");
});

// 模拟 watch
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

总结

• useCallback 和 useMemo：类似于 Vue 3 中的 computed，用于记忆化回调函数和计算结果。
• useEffect：类似于 Vue 3 中的 onMounted、onUpdated、watchEffect 和 watch，用于在组件渲染后执行副作用。

通过理解这些钩子和 Vue 3 中对应 API 的对比，你可以更好地在 Preact 和 Vue 3 中管理组件的状态和副作用，从而提高应用的性能和响应速度。