odjbin/vue-core-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 在 runtime-core 中新增 queuePreFlushCb 函数用于管理预冲洗回调
- 在 vue 包中导出 queuePreFlushCb 函数供外部使用
- 实现调度器中的回调队列机制，包括队列管理和执行逻辑
- 添加去重逻辑确保回调函数只执行一次
- 新增示例文件展示调度器预冲洗回调的使用方法
This commit is contained in:
dj
2026-02-24 22:06:33 +08:00
parent ba03278947
commit 4a71105e28
4 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/runtime-core/src/index.ts
View File

@@ -0,0 +1 @@
export { queuePreFlushCb } from './scheduler'

34
packages/runtime-core/src/scheduler.ts
View File

@@ -1 +1,35 @@
let isFlushPending = false 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]()
}
}
}

28
packages/vue/examples/reactivity/scheduler-2.html Normal file
View File

@@ -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>

1
packages/vue/src/index.ts
View File

@@ -1 +1,2 @@
export { reactive, effect, ref, computed } from '@vue/reactivity' export { reactive, effect, ref, computed } from '@vue/reactivity'
export { queuePreFlushCb } from '@vue/runtime-core'