VUE3组合式——响应式数据ref、reactive

VUE3 组合式 ------ 响应式数据 ref、reactive 学习笔记

一、引言

在 Vue3 中，响应式数据是构建动态交互应用的关键部分。其中，ref 和 reactive 是处理响应式数据的重要函数，深入理解它们对于高效开发 Vue3 应用至关重要。

二、ref 函数

1. 基本概念

• ref 用于创建一个响应式的基本数据类型（如 Number、String、Boolean 等）的引用。它接受一个初始值作为参数，并返回一个包含 value 属性的响应式对象。

• 例如：

import { ref } from 'vue';
const count = ref(0);

这里创建了一个名为 count 的响应式数据，初始值为 0，要访问或修改它的值，需要通过 count.value。

2. 响应式原理

• 当 count.value 的值发生改变时，Vue 能够自动追踪到这个变化，并触发与之相关的组件重新渲染。这是因为在 ref 内部，Vue 利用了 Object.defineProperty() （在 Vue3 中对其进行了优化）或 Proxy 来实现数据劫持，监听 value 属性的读写操作。

1. 使用场景

• 适用于单个基本数据类型需要响应式的情况，比如一个计数器的值、一个开关的状态等。在组件的 setup 函数中，如果需要一个简单的响应式变量，ref 是很好的选择。例如，在一个简单的点击计数器组件中，只需要一个数字来记录点击次数，使用 ref 就非常简洁明了：

import { ref } from 'vue';
export default {
  setup() {
    const clickCount = ref(0);
    const handleClick = () => {
      clickCount.value++;
    };
    return { clickCount, handleClick };
  }
};

三、reactive 函数

1. 基本概念

• reactive 用于创建一个响应式的对象。它接受一个普通的 JavaScript 对象作为参数，并返回一个被 Proxy 代理后的响应式对象。

• 示例：

import { reactive } from 'vue';
const state = reactive({
  name: 'John',
  age: 30
});

这里创建了一个包含 name 和 age 属性的响应式对象 state，后续可以直接通过 state.name、state.age 来访问和修改属性值，并且 Vue 会自动响应这些变化。

2. 响应式原理

• reactive 利用 Proxy 对象来拦截对原始对象属性的访问、设置、删除等操作。这使得它能够深度监听对象的变化，即使对象内部嵌套多层，只要有属性更新，Vue 都能感知到。与 ref 不同，不需要通过额外的 .value 来访问值，操作更符合 JavaScript 对象的常规使用方式。

1. 使用场景

• 当需要处理复杂的对象数据结构，如组件的状态对象包含多个相关属性，像表单数据、应用的全局状态等场景，reactive 能让整个对象自动具备响应式能力，方便管理和维护。

四、ref 与 reactive 的区别

1. 数据类型针对性

• ref 主要针对基本数据类型，返回的是包含 value 属性的特殊响应式对象；而 reactive 针对对象类型，直接将传入的对象转换为响应式。

1. 使用方式

• 访问和修改 ref 的值需要通过 .value，而 reactive 像操作普通对象一样直接访问属性即可。

1. 响应式深度

• reactive 能自动实现深度响应式，嵌套对象的属性变化也能被追踪；ref 本身只是对基本数据的简单封装，若要处理包含对象的复杂数据，内部对象的变化不会自动触发响应，除非对其内部进一步使用 reactive 或 ref 处理。

五、总结

在 Vue3 开发中，熟练掌握 ref 和 reactive 对于构建高效、响应式的应用十分关键。根据数据的类型和应用场景合理选择使用，能够让数据管理更加清晰，组件交互更加流畅，提升整体开发体验与应用性能。当数据是简单的基本数据类型，且只需要进行简单的读写操作，不涉及复杂的对象嵌套结构时，使用 ref 函数比 reactive 函数更合适，它能让代码更加简洁直观，避免不必要的复杂性。