Vue3中ref与reactive的用法详解——ref

前言

在Vue2中的响应式数据需要放入 data 函数，Vue2 会遍历 data 中的所有属性，使用的Object.defineProperty 把每个 property 全部转为 getter/setter，getter 用来收集依赖，setter 用来执行 notify，发布更新事件。

而在Vue 3的响应式系统中使用了ref和reactive 这两个核心概念，它们为开发者提供了处理响应式数据的不同方式。理解它们的特性和区别对于构建灵活、高效的Vue应用至关重要。

ref

基本作用

ref的作用是将一个普通的 JavaScript 变量（该变量可以是基本类型的数据，也可以是引用类型的数据）包装成一个响应式的数据。

基本用法

1、首先，先看看 ref 函数传入的参数为原始数据类型(String, Number, Boolean, BigInt, Symbol, Null, Undefined)的情况：

• html部分

• Javascript部分

import { ref } from 'vue';

// 使用 ref 声明一个变量
const count = ref(0);

const countChange = () => {
    console.log(count.value); // 0
    count.value++; // 变更变量的值
    console.log(count.value); // 1
}

这里的count是一个带有value属性的对象，通过value来访问或修改变量的值。在模板中，Vue会自动解包ref，所以在模板html中直接使用变量即可，无需额外的value。

• setup()中使用

//----setup语法-----

2、然后是引用数据

。

从上面可以看出，ref可以传递原始数据也可以传递引用数据，同时传递对象类型的数据时，对象的属性存储在了value属性之下。

3、ref的数据解包

• 在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
• 如果文本插值表达式（ {{ }} ）计算的最终值是 ref ，那么也会被自动解包。

为了解决这个问题，我们可以将 age 解构成为一个顶级属性:

使用场景

使用ref的主要原因在于其轻量且直观的特性。它适用于管理简单的变量，而且在模板中的使用非常自然。对于那些不需要复杂嵌套结构的数据，ref是一个高效、易懂的选择。在处理单一状态时，它是一个强大的工具。