vue的响应式数据与渲染函数紧密耦合：渲染函数读取响应式值时自动收集依赖，数据变更后触发其重新执行生成新vnode，再经diff与patch更新真实dom。
Vue 的响应式数据和渲染函数不是两个独立模块，而是紧密耦合、协同工作的核心机制：响应式数据是“驱动源”，渲染函数是“执行体”，二者通过依赖收集自动建立追踪关系——只要渲染函数读取了某个响应式值，这个值一变，渲染函数就重跑。
渲染函数如何“感知”响应式数据
渲染函数在首次执行时，会主动读取用到的响应式变量（比如 ref 的 .value 或 reactive 对象的属性）。每次读取都会触发其 getter，此时 Vue 的响应式系统会把当前正在运行的渲染副作用（effect）记录进该数据的依赖列表中。这个过程叫“依赖收集”，它发生在渲染函数执行的当下，无需手动配置。
- 模板中写
{{ count }}，底层等价于渲染函数里访问count.value - 使用 reactive 对象时，如
state.name，访问也会触发 getter 并收集依赖 - 即使嵌套访问（如
user.profile.avatar），只要路径上每个层级都是响应式的，整个链路都会被追踪
数据变化后，渲染函数怎么被触发
当响应式数据被修改（例如 count.value++ 或 state.name = 'Alice'），setter 会被拦截，接着通知所有已收集的依赖——其中就包括组件的渲染 effect。Vue 不是直接调用 render()，而是调度一个更新任务（updateComponent），它内部会重新执行渲染函数，生成新的虚拟 DOM。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 更新是异步批量的，默认在 nextTick 中执行，避免重复渲染
- 同一个响应式对象被多个组件或计算属性使用，它的 setter 会通知所有相关 effect
- 如果某次修改没触发任何依赖（比如改了一个没被读取过的字段），就不会触发重渲染
为什么 ref 在 template 里不用 .value，但在 script 里要
这是 Vue 模板编译层做的语法糖：模板中对 ref 的访问会自动解包，即 {{ count }} 等价于 {{ count.value }}；但 JavaScript 运行时无法自动解包，所以脚本中必须显式写 count.value 才能读写。
- 解包只发生在模板插值、指令绑定（
v-model、v-if等）和部分 API（如toRefs）中 - reactive 对象没有解包机制，无论在哪都直接访问属性
- 混合使用时要注意：不能把
ref当普通对象解构（const { count } = props会丢失响应性），应使用toRefs
渲染函数与虚拟 DOM 的衔接点
渲染函数的返回值是一个 VNode（虚拟节点）树。Vue 的渲染器拿到这个 VNode 后，会与上次的旧 VNode 做 diff 对比，找出真实 DOM 中需要增删改的部分，再精准打补丁。也就是说，响应式驱动的是“重新生成 VNode”，而 diff 算法决定“怎么更新真实 DOM”。
- 每次渲染函数执行，都产出一份全新 VNode，不复用旧节点
- 静态节点（如纯文本、无绑定属性的标签）在编译阶段就被标记，diff 时跳过，提升性能
- key 的作用就是在 diff 时帮助识别节点身份，避免错误复用，尤其在列表中至关重要
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
