面试官问：为什么 Vue3 中 ref 变量必须用 .value？

const count = ref(0)
// 等价于创建 { value: 0 } 响应式对象

// 源码简化版实现
class RefImpl {
  constructor(value) {
    this._value = value
  }
  get value() {
    track(this, 'value') // 依赖收集
    return this._value
  }
  set value(newVal) {
    this._value = newVal
    trigger(this, 'value') // 触发更新
  }
}

<template>
  <div>{{ count }}</div> // 自动解包.value
</template>

const num = ref(0) // 需要.value访问
const str = ref('hello') // 需要.value修改

const inputRef = ref(null)
<input ref="inputRef">
// 访问DOM：inputRef.value.focus()

function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

const user = ref<{name: string} | null>(null)
user.value = {name: 'John'} // 类型安全赋值

const state = reactive({ count: 0 })
const { count } = toRefs(state) // 解构后仍需count.value访问

// 对象中的ref需要显式解包
const obj = { count: ref(0) }
{{ obj.count.value }} // 模板中仍需.value