响应式与虚拟 DOM
响应式（Reactivity）指数据变化时视图自动更新：你修改 count，界面上的数字立刻跟着变。Vue 3 用 Proxy 拦截数据的读写：读到依赖被记录、写入时触发更新，做到精确到属性的依赖追踪。
虚拟 DOM（Virtual DOM）是一棵轻量的 JS 对象树，描述真实 DOM 的结构。数据变化时 Vue 先生成新虚拟树，与旧树对比（diff），只把差异部分打成真实 DOM 补丁——既无需整页重渲染，又屏蔽了直接操作 DOM 的繁琐。
- Proxy 拦截读写：读取时收集依赖，赋值时触发更新
- 虚拟 DOM：JS 对象描述界面，diff 后最小化更新真实 DOM
- 响应式是「数据到视图」的自动管道，开发者只管改数据
JS
// 响应式原理的极简模型（Vue 3 的 reactive 底层就是 Proxy） function reactive(obj) { return new Proxy(obj, { get(target, key) { console.log('读取', key, '→ 记录依赖'); return target[key]; }, set(target, key, value) { console.log('写入', key, '=', value, '→ 触发更新'); target[key] = value; return true; // 告诉 Proxy 已处理完毕 } }); } const state = reactive({ count: 0 }); console.log(state.count); // 读取：记录依赖 state.count = 1; // 写入：触发页面更新
HTML
<!-- 虚拟 DOM 就是一棵 JS 对象树 --> <script> // 真实 DOM：<button class="btn">点击 0 次</button> // 对应的虚拟 DOM（ vnode ）： const vnode = { tag: 'button', props: { class: 'btn' }, children: '点击 0 次' }; // 数据变化 → 生成新 vnode → diff → 只改动变化的文本节点 </script>
本节要点响应式（Proxy）负责「知道数据变了」，虚拟 DOM 负责「用最小代价更新界面」。
