​

在构建交互式 Web 应用程序时，处理副作用是至关重要的。React 的 useEffect 和 Vue 的生命周期钩子都服务于这一目的，但它们的实现方式有所不同。在本文中，我们将探索这些机制的工作原理，比较它们的特点，并通过实际示例来理解它们的差异与相似之处。

什么是副作用？

副作用是指任何与外部世界交互或对组件渲染之外产生影响的操作。常见示例包括：

• 从 API 获取数据
• 直接操作 DOM
• 设置订阅或定时器

React 使用 useEffect 来处理这些操作，而 Vue 则采用生命周期钩子和响应式观察器。

React 的 useEffect：处理副作用的首选工具

React 的 useEffect 是一个功能强大的钩子，用于管理副作用：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log("组件已挂载或 count 发生变化：", count);

    return () => {
      console.log("在重新运行或卸载前进行清理");
    };
  }, [count]); // 在组件挂载时以及 'count' 发生变化时运行

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

关于 useEffect 的要点

• 依赖数组：控制副作用运行的时机。空数组（[]）表示仅运行一次；依赖项（例如 [count]）表示在依赖项发生变化时运行。
• 清理函数：在下一次副作用运行之前或组件卸载时运行，适用于清理定时器、订阅等内容。

Vue 的生命周期钩子：结构化且简单

Vue 将副作用组织到特定的生命周期钩子中：

• onMounted：在组件被添加到 DOM 后运行（类似于 React 中的 useEffect(() => {}, [])）。
• onUpdated：在响应式数据变化导致重新渲染后运行（类似于带有依赖项的 useEffect）。
• onUnmounted：在组件从 DOM 中移除之前运行（类似于 useEffect 的清理功能）。

Vue 组合式 API 示例

import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log("Vue：组件已挂载");
    });

    onUpdated(() => {
      console.log("Vue：组件已更新", count.value);
    });

    onUnmounted(() => {
      console.log("Vue：组件已卸载");
    });

    const increment = () => count.value++;

    return { count, increment };
  },
  template: `
    <div>
      <p>Vue Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
};

Vue 中的 watchEffect：更接近 useEffect 的替代方案

Vue 的 watchEffect 会自动跟踪响应式依赖项，并在它们发生变化时重新运行，类似于 React 的 useEffect：

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log("Count changed:", count.value);
    });

    return { count };
  },
  template: `<div>{{ count }}</div>`
};

主要差异

实际示例：获取数据

React

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return <div>{data ? data.title : 'Loading...'}</div>;
}

Vue

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);

    onMounted(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(json => data.value = json);
    });

    return { data };
  },
  template: `<div>{{ data ? data.title : 'Loading...' }}</div>`
};

总结

React 的 useEffect 功能强大，但随着依赖项和清理逻辑的增加，可能会变得复杂。Vue 的生命周期钩子和 watchEffect 提供了一种更结构化、更具声明式的方法，借助 Vue 的响应式系统简化了副作用的管理。两种框架都为开发者提供了强大的工具——选择哪一种取决于你的项目需求以及你对每种系统的熟悉程度。

你更倾向于 React 的灵活性还是 Vue 的结构化简洁性来管理副作用呢？欢迎在评论区留言告诉我们！

原文地址：https://dev.to/pravinjadhav/understanding-vuejs-lifecycle-hooks-vs-reacts-useeffect-36cc](https://dev.to/pravinjadhav/understanding-vuejs-lifecycle-hooks-vs-reacts-useeffect-36cc)
作者：Pravin Jadhav