面试题：Vue 的 Composition API 和 React Hook 有什么区别？

Vue 的 Composition API 和 React 的 Hook 都是为了解决逻辑复用和代码组织问题而引入的特性。

虽然它们的核心思想相似，但在实现方式和使用细节上有一些区别。

以下是它们的对比：

1. 设计理念

Vue Composition API：
- 基于 Vue 的响应式系统，通过 ref 和 reactive 创建响应式数据。
- 强调将相关逻辑组织在一起，而不是分散在 data、methods、computed 等选项中。
- 更适合 Vue 的响应式编程模型。
React Hook：
- 基于 JavaScript 闭包和函数式编程思想，通过 useState、useEffect 等 Hook 管理状态和副作用。
- 强调在函数组件中使用状态和生命周期特性。
- 更适合 React 的函数式编程模型。

2. 核心 API

Vue Composition API：
- ref：用于创建响应式的基本数据类型。
- reactive：用于创建响应式的对象。
- computed：用于创建计算属性。
- watch 和 watchEffect：用于监听响应式数据的变化。
- setup：Composition API 的入口函数，在组件初始化时执行。

  import { ref, computed, watch } from 'vue';

  export default {
    setup() {
      const count = ref(0);
      const doubleCount = computed(() => count.value * 2);

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

      return {
        count,
        doubleCount,
      };
    },
  };

React Hook：
- useState：用于创建状态。
- useEffect：用于处理副作用（如数据获取、订阅等）。
- useContext：用于访问上下文。
- useMemo 和 useCallback：用于优化性能。

  import { useState, useEffect } from 'react';

  function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
      console.log(`count changed to ${count}`);
    }, [count]);

    return (
      <div>
        <p>{count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  }

3. 响应式机制

Vue Composition API：
- 基于 Vue 的响应式系统，自动追踪依赖并更新视图。
- 开发者无需手动管理依赖，Vue 会自动处理。
React Hook：
- 基于 JavaScript 闭包，需要手动声明依赖（如 useEffect 的依赖数组）。
- 如果依赖未正确声明，可能导致不必要的渲染或逻辑错误。

4. 生命周期

Vue Composition API：
- 提供了 onMounted、onUpdated、onUnmounted 等生命周期钩子。
- 生命周期钩子可以直接在 setup 函数中使用。

  import { onMounted, onUnmounted } from 'vue';

  export default {
    setup() {
      onMounted(() => {
        console.log('Component mounted');
      });

      onUnmounted(() => {
        console.log('Component unmounted');
      });
    },
  };

React Hook：
- 使用 useEffect 模拟生命周期。
- 通过返回一个清理函数来处理卸载逻辑。

  import { useEffect } from 'react';

  function MyComponent() {
    useEffect(() => {
      console.log('Component mounted');

      return () => {
        console.log('Component unmounted');
      };
    }, []);

    return <div>My Component</div>;
  }

5. 逻辑复用

Vue Composition API：
- 通过自定义 Hook（通常称为 Composable）实现逻辑复用。
- Composable 是一个返回响应式状态和方法的函数。

  // useCounter.js
  import { ref } from 'vue';

  export function useCounter() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  }

  // 在组件中使用
  import { useCounter } from './useCounter';

  export default {
    setup() {
      const { count, increment } = useCounter();

      return {
        count,
        increment,
      };
    },
  };

React Hook：
- 通过自定义 Hook 实现逻辑复用。
- 自定义 Hook 是一个以 use 开头的函数。

  // useCounter.js
  import { useState } from 'react';

  export function useCounter() {
    const [count, setCount] = useState(0);

    function increment() {
      setCount(count + 1);
    }

    return {
      count,
      increment,
    };
  }

  // 在组件中使用
  import { useCounter } from './useCounter';

  function Counter() {
    const { count, increment } = useCounter();

    return (
      <div>
        <p>{count}</p>
        <button onClick={increment}>Increment</button>
      </div>
    );
  }

6. 性能优化

Vue Composition API：
- Vue 的响应式系统自动优化依赖追踪，减少不必要的渲染。
- 通过 computed 和 watchEffect 实现细粒度的更新。
React Hook：
- 需要手动优化，例如使用 useMemo 和 useCallback 避免不必要的计算和渲染。
- 依赖数组的声明需要谨慎，否则可能导致性能问题。

总结

特性	Vue Composition API	React Hook
设计理念	基于响应式系统，逻辑组织更集中	基于函数式编程，状态和副作用分离
核心 API	`ref`、`reactive`、`computed`、`watch`	`useState`、`useEffect`、`useMemo`
响应式机制	自动追踪依赖	手动声明依赖
生命周期	`onMounted`、`onUnmounted` 等	通过 `useEffect` 模拟
逻辑复用	通过 Composable 实现	通过自定义 Hook 实现
性能优化	自动优化依赖追踪	需要手动优化