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

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 3 组合式 API 与

相关专题

python是前端还是后端

Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。

2523

2023.08.11

前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。

5463

2023.10.09