Vue 3 响应式变量笔记

一、ref

定义：

ref 用于创建一个 基本类型 或 对象类型的响应式引用，它会包裹一个 .value。

适用场景：

• 基础类型（如 string, number）响应式

• 也可以用于对象，但对象值会被深度代理

示例：

import { ref } from 'vue'
​
const count = ref(0)
​
count.value++  // 需要通过 .value 访问

注意：

• .value 是必须的，除非在模板中使用（模板中会自动解包）

• ref 对象是不可解构的，解构会丢失响应式

二、reactive

定义：

reactive 用于将一个 对象 转换为响应式对象（深度响应式）

适用场景：

• 管理多个字段的响应式对象（如表单、复杂结构）

示例：

import { reactive } from 'vue'
​
const state = reactive({count: 0,user: {name: 'Alice'}
})
​
state.count++

注意：

• 不能用于基本类型，基本类型会被忽略或报错

• 不能自动解构，解构时会丢失响应性

三、toRef

定义：

toRef 用于将响应式对象中的一个 属性单独提取 为 ref，但仍然保持响应性连接。

适用场景：

• 当你想把对象的某个属性传给子组件或单独处理时，保持其响应性

示例：

import { reactive, toRef } from 'vue'
​
const state = reactive({count: 0
})
​
const countRef = toRef(state, 'count')
countRef.value++   // 会同步更新 state.count

注意：

• 如果原始对象属性不存在，toRef 也会创建一个响应式的引用

四、toRefs

定义：

toRefs 用于将一个响应式对象的每个属性都转换成 ref，适合解构使用。

适用场景：

• 需要从 reactive 对象中解构多个值，又想保留响应性

示例：

import { reactive, toRefs } from 'vue'
​
const state = reactive({count: 0,name: 'Vue'
})
​
const { count, name } = toRefs(state)
count.value++

注意：

• toRefs 仅适用于 reactive 对象，非响应式对象使用无意义

五、补充常见的响应式 API

shallowRef

用法：

只对最外层做响应式，内部对象不会被深度代理

import { shallowRef } from 'vue'
​
const obj = shallowRef({ name: 'Vue' })
obj.value.name = 'React'  // 不会触发更新

shallowReactive

用法：

类似于 reactive，但只代理第一层属性

import { shallowReactive } from 'vue'
​
const state = shallowReactive({user: {name: 'Vue'}
})
state.user.name = 'React'  // 不会触发响应式更新

readonly

用法：

创建一个只读的响应式对象

import { readonly } from 'vue'
​
const state = reactive({ count: 0 })
const readonlyState = readonly(state)
​
readonlyState.count++  // 报错，不能修改

isRef、isReactive、isReadonly、unref

用法：

判断响应式类型或取值

import { ref, isRef, isReactive, unref } from 'vue'
​
const a = ref(1)
console.log(isRef(a))           // true
console.log(unref(a))           // 1

总结表格