笔记：useMemo vs computed & useEffect vs watch

useMemo vs computed

React的useMemo钩子和Vue的computed属性都是实现这一目标的重要工具。它们都用于优化那些依赖于其他状态或属性，并且计算成本较高的表达式。下面将详细比较React中使用useMemo和在Vue中使用computed完成相同监听功能时的异同。

React中的useMemo

在React中，useMemo是一个钩子，它接收一个"创建"函数和一个依赖项数组。当依赖项之一发生变化时，这个"创建"函数就会被重新执行。useMemo通过记忆计算结果的方式，避免了在每个渲染阶段都执行高成本的计算。

import React, { useState, useMemo } from 'react';

function expensiveComputation(num) {
  console.log('Computing...');
  return num * 2; // 假设这是一个计算成本较高的函数
}

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

  const computedValue = useMemo(() => expensiveComputation(count), [count]);

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

Vue中的computed

在Vue中，computed属性是基于响应式依赖进行缓存的计算属性。只有当它的依赖发生变化时，计算才会重新执行。这使得computed属性非常适合执行那些对性能有要求的计算。

<template>
  <div>
    <p>{{ computedValue }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    computedValue() {
      console.log('Computing...');
      return this.count * 2; // 假设这是一个计算成本较高的函数
    }
  }
}
</script>

比较

通过一个表格来详细对比React的useMemo和Vue的computed：

特性	React useMemo	Vue computed
定义方式	钩子函数	组件选项
缓存机制	依赖项数组内元素变化触发重新计算	响应式依赖变化触发重新计算
使用场景	函数组件	选项API或组合API的组件
执行时机	组件渲染过程中	依赖变化时
适用性	适用于函数组件	适用于所有Vue组件
性能优化	减少不必要的计算	减少不必要的计算和渲染
易用性	需要理解Hooks机制	直观，易于理解和使用

小结

尽管React的useMemo和Vue的computed在实现细节上有所不同，但它们的目标相同------减少不必要的计算，优化组件的性能。在选择使用哪一个时，主要考虑的是你正在使用的框架及其提供的最佳实践。React开发者会倾向于使用useMemo来优化函数组件，而Vue开发者则依赖computed属性来实现相似的功能，享受其带来的便利和性能优势。

---

useEffect vs watch

React和Vue都提供了强大的响应式特性来帮助开发者管理应用状态的变化。useEffect和watch分别是React和Vue中用于侦听和响应状态变化的工具。虽然它们在不同的框架中，但是目标相同：监听数据的变化并执行相应的副作用。

React中的useEffect

在React中，useEffect是一个钩子，允许你在函数组件中执行副作用操作。这些副作用可能包括数据获取、订阅或手动更改React组件中的DOM。useEffect接受两个参数：一个是包含副作用逻辑的函数，另一个是依赖项数组。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 依赖项数组，只有当count变化时才重新执行副作用

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Vue中的watch

在Vue中，watch允许你对响应式数据进行更细粒度的观察，并在数据变化时执行特定的操作。watch可以是一个对象，其中的键是需要观察的数据，值是当数据变化时应该调用的函数。

<template>
  <div>
    <p>You clicked {{ count }} times</p>
    <button @click="count++">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  watch: {
    count(newVal, oldVal) {
      document.title = `You clicked ${newVal} times`;
    },
  },
};
</script>

对比

下面的表格详细对比了React中的useEffect和Vue中的watch：

特性	React useEffect	Vue watch
功能	执行副作用操作	观察数据变化并执行响应
参数	副作用函数和依赖项数组	观察的数据和对应的回调函数
执行时机	组件渲染到屏幕后	指定的数据变化时
清理机制	返回一个清理函数	在beforeUnmount钩子中清理
使用场景	数据获取、订阅、定时器、更新DOM	观察响应式数据变化、执行异步操作
依赖管理	通过依赖项数组管理	直接在watch对象中声明

小结

尽管useEffect和watch在不同的框架中实现了类似的功能，但它们在使用方法、执行时机和依赖管理等方面存在差异。useEffect提供了一种统一的方式来处理组件的副作用，适用于执行几乎所有类型的副作用逻辑。而watch提供了对Vue响应式数据更精细的观察能力，特别适用于根据数据变化执行异步操作或昂贵的计算。