Vue3 computed、ref响应式核心

一、可写计算属性（computed）

基础代码

import { ref, computed } from 'vue'

// 1. 定义响应式变量
const count = ref(1)

// 2. 定义【可写计算属性】
const plusOne = computed({
  // 读取时触发：返回 count + 1
  get: () => count.value + 1,
  // 赋值时触发：间接修改 count
  set: (val) => {
    count.value = val - 1
  }
})

// 3. 给计算属性赋值（触发 set）
plusOne.value = 1
console.log(count.value) // 输出：0

核心知识点

1. ref：创建基本类型响应式变量，必须通过 .value 访问 / 修改值

2. 计算属性分类

   • 只读：computed(() => 表达式)
   • 可写：computed({ get, set })

3. 执行逻辑

   • 读取 plusOne.value → 执行 get
   • 赋值 plusOne.value = x → 执行 set，val 为赋值内容

4. 执行流程

   • 初始：count.value = 1
   • plusOne.value = 1 → 触发 set → count.value = 1-1 = 0
   • 最终打印：0

二、ref 赋值给 reactive 的自动解包

基础代码

import { ref, reactive } from 'vue'

const count = ref(1)
const obj = reactive({})

// ref 赋值给 reactive 属性
obj.count = count

console.log(obj.count) // 1（自动解包）
console.log(obj.count === count.value) // true

核心原理

当 ref 直接赋值给 reactive 对象的属性时，Vue 会自动解包

• 自动取出 ref.value 作为属性值
• 无需手动写 .value，保持响应式双向同步
  示例：

count.value = 100 
console.log(obj.count) // 100（自动更新） 

obj.count = 200 
console.log(count.value) // 200（双向绑定）

三、ref 不会自动解包的场景（面试 / 开发高频坑点）

核心规则

**只有 ref 直接赋值给 reactive 对象的【第一层属性】，才会自动解包。

其余所有场景，都不会自动解包，必须手动使用 .value。

1. 存入数组 → 不解包

const count = ref(1)
const arr = reactive([])

arr.push(count)
console.log(arr[0])        // ref 对象
console.log(arr[0].value)  // 1（必须手动 .value）

2. 深层嵌套对象 → 不解包

const count = ref(1)
const obj = reactive({
  info: {
    num: count // 深层嵌套 ❌ 不解包
  }
})
console.log(obj.info.num.value) // 1

3. 存入 Map / Set → 不解包

const count = ref(1)
const map = reactive(new Map())
map.set('count', count)

console.log(map.get('count').value) // 1

4. 赋值给普通变量 → 不解包

const count = ref(1)
const num = count
console.log(num.value) // 1

5. 作为函数参数传递 → 不解包

const count = ref(1)
function fn(val) {
  console.log(val.value) // 1
}
fn(count)

四、自动解包场景总结表

记忆口诀

**reactive 第一层属性赋值 ref → 自动解包

其他所有场景 → 一律需要 .value**

五、核心重点回顾

1. 可写计算属性通过 set 实现间接修改源数据，读走 get，写走 set
2. ref 赋值给 reactive 第一层属性会自动解包，双向响应式同步
3. 数组、嵌套、集合、变量传参等场景不会自动解包，必须用 .value