Vue 3 响应式为什么能自动更新页面
Vue 的响应式本质是记录“谁使用了数据”，在数据变化后只通知相关部分更新。
先用白话理解
这篇内容在讲什么？
Vue 会记住页面使用了哪些数据，数据变化后自动更新相关页面。
问题
Vue 修改数据后页面没更新，或解构后失去响应式，怎么办？
直接解构 reactive 对象，或在响应式系统外保存了旧值。
解决方案
- 基础值使用 ref
- 对象使用 reactive
- 解构使用 toRefs
- 派生值使用 computed
响应式状态、派生值与监听示例代码
type UserState = { name: string; score: number }
const state = reactive<UserState>({
name: '肥猫',
score: 0
})
const { name, score } = toRefs(state)
const level = computed(() => score.value >= 100 ? '高级' : '入门')
function addScore(value: number) {
state.score += value
}
watch(score, (next, previous) => {
console.log(`积分：${previous} → ${next}`)
})数据读取时记录依赖
组件渲染或 computed 读取响应式数据时，Vue 会记录当前逻辑依赖了哪些值。
数据修改时触发更新
ref 通过 value 访问，reactive 使用代理对象；修改后 Vue 会通知相关副作用重新执行。
避免破坏响应式连接
直接解构 reactive 对象可能失去响应式联系，可以使用 toRefs 或保持对象访问。
- ref 适合单值
- reactive 适合对象
- computed 适合派生数据
结语
判断最终要回到真实体验
技术方案没有脱离场景的标准答案。把用户任务、业务边界、开发成本和长期维护放在一起评估，才有可能做出稳定、清晰且经得起变化的页面。
照着做的步骤
- 用 ref 或 reactive 保存状态
- 在模板或 computed 中读取
- 通过明确方法修改数据
- 观察相关视图更新
容易踩的坑
- 随意解构 reactive
- 把普通变量当响应式变量
- 在 computed 中修改状态
术语不用怕
- ref：包装单个响应式值
- reactive：创建响应式对象
- computed：根据其他数据计算结果