Vue响应式系统通过渲染函数执行时自动收集依赖、数据变更时精准通知重渲染实现静默联动，不依赖轮询或手动调用；首次挂载读取数据触发getter收集依赖，setter触发后批量异步更新。
Vue.js 响应式系统在组件渲染中不是“主动触发”，而是通过数据读取与变更的自然联动，在特定环节自动介入——关键在于渲染函数执行时收集依赖，响应式数据被修改时通知重渲染。它不依赖定时轮询或手动调用，而是一套静默、精准、按需激活的机制。
首次挂载：渲染函数执行 → 自动收集依赖
组件首次渲染时，Vue 调用 render 函数生成 VNode。这个过程会读取所有用到的响应式数据（如 ref.value、reactive.obj.name），每次读取都触发 getter，此时：
- 若当前处于活跃副作用（如组件 render effect）中，该 effect 就会被记入对应响应式属性的依赖池（Dep）；
- 嵌套访问（如
state.user.profile.avatar）会逐层触发 get，实现深度依赖记录； - 模板中写的
{{ count }}，底层等价于 render 函数里访问count.value，同样完成依赖收集。
数据变更：setter 被调用 → 触发更新队列
当响应式数据被修改（如 count.value++ 或 state.msg = 'new'），setter 或 Proxy 的 set 拦截器被触发，随即启动更新流程：
- 根据变更字段（如
'msg'）查到对应 Dep； - 遍历 Dep 中所有已登记的 Watcher 或 effect（含组件渲染 effect）；
- 将它们推入异步更新队列（microtask），避免同一 tick 内重复执行；
- 待队列清空后，批量重新执行相关 render 函数，生成新 VNode 并 diff 更新 DOM。
父组件更新：props 变更 → 子组件可能重渲染
子组件是否重渲染，取决于它是否实际使用了变化的 props：
立即学习“前端免费学习笔记（深入）”；
- 如果模板或 render 函数中读取了某个 prop（如
{{ title }}），该 prop 的变更会触发子组件依赖收集链路，进而重跑 render； - 如果 props 改变了但子组件没在渲染逻辑中读取它，就不会触发更新——Vue 不做无差别刷新；
- 即使 data 没变，只要父传的响应式 prop 被读取且发生变更，子组件仍会走完整更新流程。
其他触发场景：非数据变更也能间接驱动
有些操作本身不改数据，但会打破响应式链路或强制刷新：
-
this.$forceUpdate()：跳过依赖追踪，直接标记组件为“需更新”，适用于新增未劫持属性后补救； -
triggerRef()：针对shallowRef主动唤醒依赖，常用于内部状态需要手动通知的场景； - keep-alive 组件激活时：虽然数据未变，但 Vue 会重新执行 render 确保视图与缓存状态一致。
