一、概念和原理

ref

概念：ref是包装基本类型的响应式引用，用于让 任何类型的值（包括基本类型和引用类型）变成 响应式数据。

原理：通过Object.defineProperty监听value属性的get/set，当包裹引用类型时，会自动将其转换为reactive代理对象。

• 底层是一个包含 .value 的响应式对象  
• 基本类型无法被代理，所以 ref 把它们包成对象，用 .value 访问。
• 引用类型也可以放，但会被 reactive 自动代理（内部调用 reactive）。

基本用法：

import { ref } from 'vue'

const count = ref(0)

console.log(count.value) // 0
count.value++            // 视图会自动更新

总结：ref 是 Vue 3 的响应式引用，用来让任何值都能被追踪变化，基本类型靠它，引用类型也能用，访问用 .value，模板自动解包。

reactive

概念：reactive 可以把一个普通对象变成响应式对象，当对象的属性发生变化时，Vue 会自动追踪并更新相关的视图。

原理：基于 Proxy 的代理

• 底层使用 new Proxy(target, handler) 对整个对象做代理。
• 拦截所有属性的读取和设置，从而追踪依赖和触发更新。

其中需要注意的地方是

1、reactive只能接受对象或数组等的引用类型，不能用于基本类型（string、number等）

2、直接解构reactive对象会破坏响应式，需用toRefs包裹

3、默认是深层递归响应，嵌套对象也会被代理

基本用法：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

state.count++ // 视图会自动更新

总结：reactive 是 Vue 3 中用于创建对象级响应式数据的 API，适合管理复杂状态，但需注意解构和类型限制。

二、区别

总结：ref 是包装基本类型的响应式引用，reactive 是代理对象的响应式系统。一个靠 .value，一个靠 Proxy，本质不同，用途互补。