当前位置：首页 > news >正文

Vue: ref、reactive、shallowRef、shallowReactive

news 2025/9/9 8:22:09

1. ref

作用：创建响应式数据引用（支持基本类型和对象）。
原理：

通过 value 属性访问/修改数据
对象类型内部自动转换为 reactive
使用 Object.defineProperty 实现响应式

API：

import { ref } from 'vue'const count = ref(0) // 基本类型
const user = ref({ name: 'Alice' }) // 对象类型自动转为 reactive// 修改值
count.value++ 
user.value.name = 'Bob'

模板中使用：

<template><div>{{ count }}</div><button @click="count++">Increment</button>
</template>

2. reactive

作用：创建深层响应式对象（仅支持对象/数组）。
原理：

基于 Proxy 实现深度响应式
嵌套对象自动转为 reactive
直接访问属性（无需 .value）

API：

import { reactive } from 'vue'const state = reactive({count: 0,user: { name: 'Alice' } // 嵌套对象自动响应式
})// 修改值
state.count++
state.user.name = 'Bob'

模板中使用：

<template><div>{{ state.count }}</div><button @click="state.count++">Increment</button>
</template>

3. shallowRef

作用：创建浅层响应式引用（仅顶层 value 响应）。
原理：

只追踪 .value 变化（不追踪内部属性）
对象内部修改不会触发更新
替换整个 .value 会触发更新

API：

import { shallowRef } from 'vue'const user = shallowRef({ name: 'Alice' })//  ❌ 内部修改无效（不会触发更新）
user.value.name = 'Bob'// ✅ 替换整个对象有效（触发更新）
user.value = { name: 'Bob' }

典型场景：

大型不可变数据（如三方库实例）
性能敏感场景避免深度监听

4. shallowReactive

作用：创建浅层响应式对象（仅顶层属性响应）。
原理：

只响应顶层属性变化
嵌套对象不会自动转为响应式

API：

import { shallowReactive } from 'vue'const state = shallowReactive({count: 0,user: { name: 'Alice' } // 嵌套对象非响应式
})// ✅ 顶层修改有效
state.count++ // ❌ 嵌套修改无效（不会触发更新）
state.user.name = 'Bob'

典型场景：

表单分组（只关心组变化）
性能优化（避免深度监听大对象）

总结对比表

特性	ref	reactive	shallowRef	shallowReactive
支持类型	所有类型	对象/数组	所有类型	对象/数组
深层响应式	✅ (对象自动转)	✅	❌	❌
响应触发条件	.value 变化	属性修改	.value 替换	顶层属性修改
访问方式	需要 `.value`	直接访问	需要 `.value`	直接访问
性能开销	中等	较高（深度监听）	低	低
典型场景	基本类型/对象引用	复杂状态对象	大型不可变数据	层级明确的数据

代码示例总结

<script setup>
import { ref, reactive, shallowRef, shallowReactive } from 'vue'// 1. ref（深度响应）
const deepRef = ref({ count: 0 })
deepRef.value.count++ // 触发更新// 2. reactive（深度响应）
const deepReactive = reactive({ user: { name: 'Alice' } })
deepReactive.user.name = 'Bob' // 触发更新// 3. shallowRef（浅层响应）
const shallow = shallowRef({ count: 0 })
shallow.value.count++ //  ❌ 不触发更新
shallow.value = { count: 1 } // ✅ 触发更新// 4. shallowReactive（浅层响应）
const shallowState = shallowReactive({ user: { name: 'Alice' } 
})
shallowState.user.name = 'Bob' //  ❌ 不触发更新
shallowState.user = { name: 'Bob' } // ✅ 触发更新
</script>