【Vue】Vue 3 中的 ref 函数与 React 中的 useState 钩子的对比

Vue 3 中的 ref 函数在某种程度上与 React 中的 useState 钩子有相似之处。两者都用于在函数式组件中管理状态，并且当状态改变时，都会触发组件的重新渲染。不过，两者之间也有一些关键的不同点和使用方式。

相似之处

1. 创建状态：

   • Vue 3 使用 ref 创建响应式状态。
   • React 使用 useState 创建状态。

2. 访问和修改状态：

   • Vue 3 通过 ref 对象的 value 属性来访问和修改状态。
   • React 通过状态变量和状态更新函数来访问和修改状态。

不同之处

1. API 设计：

   • Vue 3 的 ref 更加灵活，可以包裹基本数据类型和复杂数据类型（如对象和数组），并且可以在模板中自动解包。
   • React 的 useState 返回一个状态值和一个状态更新函数，状态更新函数是异步的。

2. 响应式系统：

   • Vue 3 的响应式系统是基于 Proxy 实现的，能够自动追踪依赖并更新视图。
   • React 的状态管理是通过调度函数来实现的，每次状态更新都会触发整个组件重新渲染。

示例对比

Vue 3 示例

<template>
  <div>
    <p>当前计数: {
    
    {
    
     count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import {
    
     ref } from 'vue';

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

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

    return {
    
    
      count,
      increment
    };
  }
};
</script>

React 示例

import React, {
    
     useState } from 'react';

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

  const increment = () => {
    
    
    setCount(count + 1);
  };

  return (
    <div>
      <p>当前计数: {
    
    count}</p>
      <button onClick={
    
    increment}>增加</button>
    </div>
  );
}

export default Counter;

详细说明

1. 创建状态：

   • 在 Vue 3 中，我们使用 ref(0) 来创建一个初始值为 0 的响应式状态 count。
   • 在 React 中，我们使用 useState(0) 来创建一个初始值为 0 的状态 count 和一个状态更新函数 setCount。

2. 访问和修改状态：

   • 在 Vue 3 中，我们通过 count.value 来访问和修改状态。
   • 在 React 中，我们直接使用 count 来访问状态，通过 setCount 来修改状态。

3. 模板和视图更新：

   • 在 Vue 3 中，模板中使用 { { count }}，Vue 会自动解包 ref 对象的 value 属性。
   • 在 React 中，JSX 语法中直接使用 {count} 来显示状态值。

总结

虽然 Vue 3 的 ref 和 React 的 useState 都用于管理组件状态，但它们的实现方式和使用场景有所不同。Vue 3 的 ref 更加灵活，可以处理各种类型的数据，而 React 的 useState 更加简洁，适合处理简单的状态管理需求。两者各有优劣，具体选择取决于开发者的需求和偏好。