Vue 3 的 ref 和 reactive 有何不同？

在 Vue 3 中，ref 和 reactive 是两个非常重要的响应式数据声明方法。它们dou是 Vue 中实现响应式数据的关键手段。然而它们在使用方式和适用场景上有所不同。

ref 是一个函数，它的作用是将一个普通的 JavaScript 变量包装成一个响应式的数据。官方文档给出的解释是：接受一个内部值，返回一个响应式的、可geng改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

<template> <div class="main"> <p>count: {{ count }}</p> <button @click="changeCount">geng新count</button> </div> </template> <script setup> import { ref } from 'vue' let count = ref const changeCount = => { count.value += 1 } </script>

Ke以kan到，使用 ref 创建的响应式数据，在模板中Ke以直接使用，而在 JavaScript 代码中需要通过 .value 来访问。

reactive 是一个函数，它的作用是将一个普通的对象转换成响应式对象。它会递归地将对象的所有属性转换为响应式数据。返回一个 Proxy 对象。

<script setup> import { reactive } from 'vue' const person = reactive({ name: 'Echo', age: 18, }) console.log // 读取属性值：'Echo' person.age = 20 // 修改属性值 console.log // 读取修改后的属性值：20 </script>

reactive 的参数只Neng是对象或者数组或者像 Map 、 Set 这样的集合类型。

ref：支持所有类型

reactive：仅支持对象和数组等引用类型

例如 ref 可用于数字，而 reactive 则用于对象。

ref：需要通过 .value 访问和修改，如 count.value++

reactive：直接访问和修改属性，如 state.count++

ref：在解构时需要使用 toRefs 以保持响应性

reactive：直接解构会导致响应式丢失，需结合 toRefs 使用

通过 RefImpl 类创建响应式引用，包含 getter 和 setter。

.value 属性实现依赖收集与触发geng新 。例如当读取 count.value 时会进行依赖收集；当修改 count.value 时会触发相关依赖geng新。

支持深层响应式。例如const obj = ref; obj.value.nested.prop++ 可触发geng新。

适合简单数据或需要.value操作的场景，如基本类型或需要整体替换的对象/数组。

基于 Proxy 实现对对象的深度代理。例如const state = reactive; 会将 state 转换为 Proxy 对象。

本身具有深层响应性，但存在重新赋值时丢失响应式的风险 。例如let state = reactive; state = { count: 1 }; 会失去响应性，可通过 Object.assign 或 toRefs 来避免此问题 。state = Object.assign 。 使用 toRefs 解构以保持每个属性的响应性 。 const { count } = toRefs; 。解构后依然Neng保持响应性 。让代码geng灵活且符合直觉 。比如将部分属性传递给函数时无需担心丢失响应性 。如 fn 而不是 fn。当然Ru果只是简单地传递 state ，那么也是没问题的，因为整个 state 是 Proxy 对象，Neng正常追踪变化 。只是这样用的时候要时刻注意它的引用关系，确保不会误操作导致丢失 Proxy 代理链接，从而引发非预期的结果出现！所以总体来说在复杂数据结构且需频繁操作内部属性时 ，reactive Neng带来较好的开发体验；但在一些简单场景或涉及重新赋值等操作时 ，则需谨慎处理以防丢失响应性 ！此时或许Ke以考虑用 ref 来替代完成任务会geng加合适些呢，毕竟它在这方面的适应Neng力相对来说还是比较强的哈～其实hen多时候大家也在根据实际业务需求去灵活选择二者的，比如说对于一些表单数据啥的，用 reactive 就hen方便，因为它的结构相对固定嘛，直接定义个对象然后绑定到表单上就完事了；而对于一些零散的数据，比如说分页信息啊什么的，用 ref 可Neng就geng合适一点儿～总之呢，这俩工具各有千秋，kan你具体怎么用了～所以说嘛，在 Vue 里搞响应式数据，还是得根据实际情况来选择Zui合适的方案才行呢！不Neng一概而论哦～要不然hen容易掉坑里的哟～毕竟这俩家伙虽然douNeng实现响应式，但是背后的逻辑还是有hen大差别的呀！咱们得好好理解透彻才行～别kan现在好像douNeng用，用着用着你就会发现其中的门道啦～嘿嘿～所以说啊，实践出真知嘛！只有在不断地实践过程中，我们才Neng真正掌握它们的精髓所在呢！好啦，今天就先聊到这里吧，希望对大家有所帮助哦～下次再见啦～拜拜～其实关于这块儿的内容还有hen多Ke以深入探讨的，比如说在 TypeScript 环境下怎么geng好地使用它们呀，或者是在一些特殊场景下如何优化它们的性Neng啊等等，这些dou是值得咱们去深入研究的话题呢！期待咱们下次再一起继续交流学习哟～拜拜～👋👋👋 综上所述,ref和reactive是Vue 中构建