ref与reactive的区别

Vue.js 中 ref 和 reactive 函数之间的差异
在 Vue 3 中，响应式数据可以通过两种方式创建：ref 和 reactive。这两种方法虽然都能实现响应式功能，但在具体应用上存在显著区别。
数据类型支持

对于基本类型的变量（如字符串、数字），推荐使用 ref 来定义[^2]。
当处理对象或数组这样的复杂结构时，则更适合采用 reactive 进行封装。

使用语法对比
当利用 ref 定义一个属性后，在模板内访问该属性时不需要额外操作；然而如果是在 JavaScript 部分读取其值的话，则需通过 .value 属性来获取实际内容。而由 reactive 创建的对象可以直接像普通 JS 对象一样被遍历和修改，无需特别注意任何前缀或后缀。
import { ref, reactive } from 'vue'

// 使用 ref 定义基础类型的数据
const count = ref(0)

console.log(count.value) // 输出: 0

// 使用 reactive 定义复合类型的数据
let state = reactive({
message: "hello",
})

console.log(state.message) // 输出: hello
登录后复制
性能考量
由于内部机制的不同，对于简单的状态管理来说，ref 的开销较小；而对于复杂的嵌套对象而言，reactive 则表现得更为高效，因为它能够更精细地追踪依赖关系并优化更新过程。
综上所述，可以认为 reactive 是一种更加通用且高效的解决方案，适用于大多数情况下的组件开发需求；而 ref 更适合用于那些只需要简单绑定数值的地方。