响应式原理概览
「改了数据页面自动变」听起来神奇，原理却可以直接体会：框架需要拦截数据的读写。Vue 3 用 Proxy 代理整个对象——任何读取（依赖收集：谁用了这个数据）和修改（触发更新：通知依赖它的地方重新渲染）都会被捕获。
下面的示例用 20 行 Proxy 实现了一个迷你响应式系统：get 时打印「谁在读」，set 时不仅改值，还顺手更新了页面标题。把 get 的记录攒起来就是「依赖收集」，把 set 后的更新换成「重新渲染组件」，就是 Vue 3 响应式系统的骨架。
对比老版本：Vue 2 用 Object.defineProperty 逐个属性拦截，因此无法感知「新增/删除属性」，需要 $set 这类补丁；Proxy 代理整个对象，没有这些历史包袱——这也是 Vue 3 重写的核心原因之一。
本节要点响应式 = Proxy 拦截读写：get 时收集依赖，set 时触发更新；Vue 2 的 defineProperty 拦不住属性增删，Proxy 没有此限制。
JavaScript
// Vue 3 响应式的核心：Proxy 拦截读写 const state = { count: 0 }; const reactiveState = new Proxy(state, { get(target, key) { console.log('读取了', key); // 这里做"依赖收集" return target[key]; }, set(target, key, value) { target[key] = value; console.log(key, '被改为', value); // 这里"触发更新" document.title = '计数：' + value; // 简化版：同步到视图 return true; }, }); reactiveState.count = 1; // set 拦截 → 自动更新了页面标题 reactiveState.count = 2; console.log('当前值：', reactiveState.count); // get 拦截 // Vue 3 的 ref/reactive 就是这套机制的封装： // const count = ref(0) // count.value++ → 触发依赖它的模板重新渲染
