feat(runtime-core): 添加预冲洗回调队列功能

- 在 runtime-core 中新增 queuePreFlushCb 函数用于管理预冲洗回调 - 在 vue 包中导出 queuePreFlushCb 函数供外部使用 - 实现调度器中的回调队列机制，包括队列管理和执行逻辑 - 添加去重逻辑确保回调函数只执行一次 - 新增示例文件展示调度器预冲洗回调的使用方法
2026-02-24 22:06:33 +08:00
parent ba03278947
commit 4a71105e28
4 changed files with 64 additions and 0 deletions
--- a/packages/runtime-core/src/index.ts
+++ b/packages/runtime-core/src/index.ts
@@ -0,0 +1 @@
+export { queuePreFlushCb } from './scheduler'
--- a/packages/runtime-core/src/scheduler.ts
+++ b/packages/runtime-core/src/scheduler.ts
@@ -1 +1,35 @@
 let isFlushPending = false
+
+const resolvedPromise = Promise.resolve() as Promise<any>
+
+let currentFlushPromise: Promise<void> | null = null
+
+const pendingPreFlushCbs: Function[] = []
+export function queuePreFlushCb(cb: Function) {
+  queueCb(cb, pendingPreFlushCbs)
+}
+function queueCb(cb: Function, pendingQueue: Function[]) {
+  pendingQueue.push(cb)
+  queueFlush()
+}
+
+function queueFlush() {
+  if (!isFlushPending) {
+    isFlushPending = true
+    currentFlushPromise = resolvedPromise.then(flushJobs)
+  }
+}
+function flushJobs() {
+  isFlushPending = false
+  flushPreFlushCbs()
+}
+export function flushPreFlushCbs() {
+  if (pendingPreFlushCbs.length) {
+    //拷贝去重,类似深拷贝
+    let activePreFlushCbs = [...new Set(pendingPreFlushCbs)]
+    pendingPreFlushCbs.length = 0
+    for (let i = 0; i < activePreFlushCbs.length; i++) {
+      activePreFlushCbs[i]()
+    }
+  }
+}
--- a/packages/vue/examples/reactivity/scheduler-2.html
+++ b/packages/vue/examples/reactivity/scheduler-2.html
@@ -0,0 +1,28 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Document</title>
+    <script src="../../dist/vue.js"></script>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script>
+    const { reactive,effect,queuePreFlushCb } = Vue
+    const obj=reactive({
+        count:1
+    })
+
+    effect(()=>{
+        console.log(obj.count)
+    },{
+        scheduler(){
+            queuePreFlushCb(()=>console.log(obj.count));
+
+        }
+    })
+    obj.count=2
+    obj.count=3
+</script>
+</html>
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1 +1,2 @@
 export { reactive, effect, ref, computed } from '@vue/reactivity'
+export { queuePreFlushCb } from '@vue/runtime-core'
				`@@ -0,0 +1 @@`
				`export { queuePreFlushCb } from './scheduler'`