前言

今天带大家来看看 Vue3 中非常重要的两个API：ref和reactive，这两个API是基于组合式api模式下，在setup中用于声明的具有响应式的数据的方法。所以在聊ref和reactive前，我们先了解一下什么是响应式数据。

响应式数据是指当数据发生变化时，与之相关的视图或组件会自动更新以反映这些变化的数据。在前端开发中，响应式数据通常用于构建用户界面，使其能够动态地响应用户操作或数据的变化。

比如在这个场景中：

<template>
  <div> Count:{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue';
let count = ref(1)
setInterval(() => {
  count.value++
}, 1000)
</script>

count会每秒递增，我们将看到渲染的DOM是这样变化的。

GIF 2024-3-15 11-03-01.gif

我们会发现数据和 DOM 被建立了关联，数据 counter 变化，视图层（HTML）就会跟着变化。这个与DOM 建立了关联的数据 counter 就是响应式的数据。

ref

作用：

把基本类型的数据包装编成响应式的引用类型的数据。
ref也可以处理引用数据类型，如果给 ref 函数传递了一个对象，那么这个对象就会通过 reactive() 这个方法将其转换成具有深层次的响应式对象，也就是内部本质还是调用了 reactive 方法
获取DOM元素在Vue3.中我们也可以通过ref函数来获取元素

本质： 将传入的数据包装成一个具有响应式特性的对象。

在上面那个场景中，我们就是使用了ref来创建一个响应式数据，我们需要通过返回值的 value 属性获取响应式的值，修改也需要对 .value进行修改。

注意： 在 JS 中要 .value, 在模板中则不需要。这是因为在模板中使用ref时vue3会自动将ref对象拆解为原始值（setup里ref对象的value属性值），模板上的ref不再是对象，没有.value属性。

reactive

作用：

将「引用类型」数据转换为「响应式」数据（传入的参数必须为引用类型）

本质： 将传入的数据包装成一个Proxy对象，并且reactive是使用Proxy进行代理,Proxy只接受引用类型的参数，所以reactive不能用来处理基本数据类型。

注意：

由于是 Proxy 代理的对象数据，所以可以直接获取到数据，不必添加 .value
reactive 函数只会对对象的第一层属性进行响应式转换，不会递归地对属性的属性进行转换。如果想要对深层次的属性进行响应式转换，您可以使用 ref 或者在需要的情况下使用嵌套的 reactive。

总结 🌸🌸🌸

ref 更适合处理单个值或基本数据类型，以及需要在模板中直接访问数据的情况。它简单直接，使用起来方便快捷。
而reactive 则更适用于处理复杂的对象或嵌套属性的响应式对象。它可以实现更深层次的响应式转换，适用于管理大型状态树或包含多个属性的对象。

在这篇文章中，我们基本理清了 ref 和 reactive 的基本用法和一些区别，不管是用ref还是用reactive，我们可以根据具体的需求和场景选择合适的方式。在下一篇文章中，我将从源码角度剖析ref和reactive（附带手写代码）。

带你看懂Vue中的 ref 和 reactive，我们到底用谁？

前言

ref

reactive

总结 🌸🌸🌸