Vue.js中Patch阶段对Ref引用的更新与回调函数执行时机

千辰吖_3684

千辰吖_3684

2026-05-12

859人浏览

原创

patch 阶段不处理 ref 更新和回调执行;ref 值变更触发 effect 重新运行并入队,watch 回调默认在 patch 前执行,onupdated 在 patch 后 dom 更新完毕时执行。

vue.js中patch阶段对ref引用的更新与回调函数执行时机

在 Vue.js 的响应式更新流程中,Patch 阶段本身并不直接处理 ref 的值更新,也不执行用户定义的回调函数。ref 的响应式更新发生在 数据变更触发 reactivity effect 重新运行 时(即 effect scheduler 阶段),而回调(如 watch、onUpdated、或 ref 的 .value setter 中的逻辑)的执行时机取决于其注册方式和 Vue 的调度策略,与 patch 的 DOM 操作是解耦但协同的两个环节。

Ref 值更新不发生在 Patch 阶段

ref 是一个响应式包装对象,其 .value 被 proxy 或 defineProperty 劫持。当你写 myRef.value = newValue:

  • 触发的是 reactive effect 的依赖收集与调度(effect runner → scheduler → queueJob)
  • Vue 将对应的 effect(如组件 render effect 或 watch effect)推入异步微任务队列(nextTick / Promise.then)
  • Patch(即 patch() 函数)只在 render effect 重新执行并返回新 vnode 后,才被调用,用于比对和更新真实 DOM
  • Patch 不感知 ref 变更,它只消费 render 函数产出的最新 vnode

回调函数的执行时机分三类

不同回调的触发阶段不同,需明确区分:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.1万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习