vue3 中 ref和reactive 的作用

whisper2025-03-17 14:25

在 Vue3 中，ref和reactive是用于响应式编程的两个重要函数，它们的作用如下：

ref

基本作用：用于创建一个响应式的数据引用。它可以接受一个基本类型的值（如字符串、数字、布尔值等）或一个对象，然后返回一个包含该值的响应式对象。
示例

vue

xml 复制代码

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

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

export default {
  setup() {
    // 创建一个响应式的count
    const count = ref(0);

    const increment = () => {
      // 这里可以直接通过count.value来修改值，视图会自动更新
      count.value++;
    };

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

原理：ref内部使用了Object.defineProperty()方法来定义getter和setter，当访问或修改ref的值时，会触发相应的getter和setter，从而实现响应式更新。

reactive

基本作用：用于创建一个响应式的对象。它接受一个普通对象作为参数，并返回一个代理对象，该代理对象具有响应式特性，即当对象的属性被修改时，视图会自动更新。
示例

vue

xml 复制代码

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
    <button @click="updateUser">Update User</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个响应式的user对象
    const user = reactive({
      name: 'John Doe',
      age: 30
    });

    const updateUser = () => {
      // 直接修改user对象的属性，视图会自动更新
      user.name = 'Jane Doe';
      user.age = 35;
    };

    return {
      user,
      updateUser
    };
  }
};
</script>

原理：reactive基于 ES6 的Proxy对象实现，通过对对象的操作进行拦截，在属性被访问、修改、删除等操作时进行相应的响应式处理。

两者的区别

适用场景 ：ref适合用于处理基本类型的数据，或者需要对单个数据进行独立响应式管理的情况；reactive则更适合用于处理复杂的对象，当需要对多个相关属性进行整体的响应式管理时，使用reactive会更加方便。
访问方式 ：ref需要通过.value来访问和修改其内部的值；而reactive直接访问和修改对象的属性即可。