vue3 中useEffect怎么用

在 Vue 3 中，`useEffect`是基于 React 的 Hooks 实现的功能，它允许你在组件挂载、更新以及卸载时执行一些副作用操作，例如设置定时器、发送网络请求等。它的基本语法如下：

import { useEffect, useState } from 'vue';

export default {
  setup() {
    // 定义状态变量和初始化
    const [count, setCount] = useState(0);

    // 使用useEffect钩子
    useEffect(() => {
      // 钩子函数会在组件渲染后立即执行
      console.log('Component rendered');

      // 清除函数，在组件卸载前执行
      function cleanup() {
        console.log('Component unmounted');
      }

      // 返回清除函数
      return cleanup;
      
      // 这里还可以添加第二个参数数组，当数组内容变化时，只会运行一次
      // 即使依赖数组不变，每次修改了数组内的某个元素，effect也会再次执行
      // 可以用来管理副作用依赖
      // const deps = ['someDependency'];

      // 当依赖数组存在时，需要手动传递清空函数
      // return () => {
      //   // 清理操作，如取消订阅事件、清除定时器等
      // };
    }, []);

    // 更新计数器
    function handleClick() {
      setCount(count + 1);
    }

    return { count, handleClick };
  }
};

在这个例子中，`useEffect`里的函数会在组件渲染后运行一次，`cleanup`函数则在组件卸载时执行。如果想让`useEffect`在依赖的某项状态变化时运行，可以传入一个数组作为依赖，比如上面提到的`deps`。