Vue.js 响应式系统中组件渲染的触发时机

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 确保视图与缓存状态一致。