vue响应式与虚拟dom协同工作：响应式系统触发更新，虚拟dom高效渲染。数据变更通知watcher，nexttick重绘vnode树，patch比对后局部更新dom；绕过响应式或异步时机错误会导致视图不同步。
Vue 的响应式数据与虚拟 DOM 并不是两个独立运行的模块，而是通过“依赖触发 → 重新渲染 → 差异比对 → 局部更新”这一闭环紧密协同工作的。核心在于：响应式系统负责“什么时候该更新”，虚拟 DOM 负责“怎么高效地更新”。
响应式系统如何触发更新
当 data 中的响应式属性被修改（例如 this.message = 'new'），其 setter 会立即被触发。此时 Vue 不会直接操作 DOM，而是通知所有依赖该属性的 Watcher（即使用了 {{ message }} 的组件或计算属性）——这些 Watcher 被标记为“待更新”。
- 每个组件实例在首次渲染时，都会建立自己的响应式依赖关系图；模板中访问的每一个 data、computed 或 props 属性，都会在 getter 中被自动收集为依赖
- 依赖收集只发生在渲染函数执行期间，所以条件分支（如 v-if）中的数据不会被无谓收集
- 数组变异方法（push、pop 等）和对象新增属性（需用 Vue.set 或 this.$set）才能被正确追踪，这是 Object.defineProperty 的限制所致
从数据变化到新虚拟 DOM 的生成
被标记为待更新的 Watcher 会在下一个 tick（微任务队列末尾）统一执行 render() 函数，重新生成一棵新的虚拟 DOM 树（VNode 树）。这个过程是纯 JavaScript 计算，不涉及真实 DOM。
- render 函数由模板编译器生成（或手写），它返回描述当前 UI 结构的 VNode 对象树
- 如果组件使用了 v-for，且 key 值稳定，Vue 会复用已有 VNode 实例，避免重复创建开销
- 静态节点（如不含插值的纯文本标签）会被标记为 static，跳过 diff，提升性能
虚拟 DOM 如何决定更新哪部分真实 DOM
新旧两棵 VNode 树会进入 patch 阶段，通过深度优先遍历 + 双端对比（核心是同层节点 key 比对），快速定位需要变更的最小节点集合。
- 若节点类型不同（如 div → span），直接整个替换，不逐层 diff
- 若为同一类型且有 key，则尝试复用节点（移动、更新属性/事件，而非重建）
- 文本节点仅比对 text 字段；元素节点比对 props、class、style、子节点结构等
- 最终 patch 操作批量提交到真实 DOM，避免强制同步重排
为什么有时视图没同步？关键检查点
同步失败通常不是机制失效，而是绕过了响应式或虚拟 DOM 的前提条件：
- 直接添加对象属性（this.obj.newProp = 1）→ 应改用 Vue.set(obj, 'newProp', 1) 或使用 Vue 3 的 reactive/ref
- 数组索引直接赋值（this.list[0] = newItem）→ 改用 splice、Vue.set 或替换整个数组
- 在非响应式对象上定义 data（如未声明在 data() 返回对象中）→ Vue 不会代理，自然无响应
- 异步更新被意外阻塞（如在 setTimeout 中修改 data 后立即读取 DOM）→ 需用 this.$nextTick() 等待 patch 完成
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
