Vue视图自动更新依赖响应式系统与虚拟DOM协同：数据变化触发getter收集依赖、setter通知更新，render函数生成VNode，diff算法计算最小差异并patch到真实DOM。
Vue 的视图渲染不是“手动刷新”，而是数据一变，界面自动跟着变——这个过程背后是响应式系统与虚拟 DOM 协同工作的结果。关键不在于“怎么写模板”，而在于“数据变化如何被感知、如何触发更新、更新又如何高效落地”。
响应式系统：让数据变化可追踪
Vue 把 data 中的属性变成“有监听能力”的响应式对象：
- Vue 2 用 Object.defineProperty 劫持属性的 get/set，读取时收集依赖，修改时通知更新；
- Vue 3 改用 Proxy 代理整个对象，支持新增/删除属性、数组索引赋值等更完整的响应式场景；
- ref() 和 reactive() 创建的值都经过这层封装，它们不是普通变量，而是带“订阅-发布”能力的数据容器。
模板编译：把 HTML 转成可执行的渲染函数
你写的模板（比如 <div>{{ message }}</div>）在初始化时会被 Vue 编译为一个 render 函数：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 这个函数执行后返回一个虚拟 DOM 节点（VNode），描述“当前该渲染什么”；
- render 函数内部会访问响应式数据（如 this.message），触发 getter，从而自动将当前组件的更新逻辑（Watcher 或 effect）和这个数据建立依赖关系；
- 也就是说，模板里用了哪些数据，Vue 就悄悄记住了——哪个数据变了，就重新跑一遍这个 render 函数。
虚拟 DOM 与 patch：只更新真正需要改的部分
每次数据变化引发 re-render，Vue 不会直接操作真实 DOM，而是：
立即学习“前端免费学习笔记（深入）”；
- 先调用 render 函数生成新的 VNode 树；
- 再拿它和上一次的 VNode 树做 diff 对比，找出最小差异（比如仅文本变了、某个 class 切换了、某个节点增删了）；
- 最后把差异应用到真实 DOM 上，避免全量重绘或无谓的 DOM 操作。
更新流程闭环：从数据到像素
整个链条是连贯的：
- 你在代码中执行 this.count++ → 触发 setter → 通知依赖它的 effect；
- effect 执行，重新运行组件的 render 函数 → 得到新 VNode；
- Vue 对比新旧 VNode → 算出 patch 补丁；
- 把补丁打到真实 DOM → 页面视觉更新完成。
