企业官网建设流程全解析

黑龙江建设人力资源网站,怎么用vue写wordpress主题,dw个人网页制作素材,模板网站很牛调度本义是指控制一系列任务的执行顺序/编排规划。Vue3 的调度系统使其能够做到**“批量更新、不重复渲染、任务执行顺序可控”** 。Vue 的调度系统 副作用执行顺序 去重 批量刷新所有响应式变化#xff0c;最终都不会“立刻执行”#xff0c;而是被“调度”一、Vue 为什么…调度本义是指控制一系列任务的执行顺序/编排规划。Vue3 的调度系统使其能够做到**“批量更新、不重复渲染、任务执行顺序可控”** 。Vue 的调度系统 副作用执行顺序 去重 批量刷新所有响应式变化最终都不会“立刻执行”而是被“调度”一、Vue 为什么需要调度系统如果没有调度会发生什么state.a state.b state.c如果每次set都立即触发render() render() render()造成后果性能问题顺序不可控DOM 不断更改页面抖动所以Vue 的目标是state.a state.b state.c ↓ render() // 只执行一次Scheduler 存在的意义二、调度系统的数据结构源码中的位置packages/runtime-core/src/scheduler.ts运行时runtime调度对 effect 进行 “统一执行管理”。调度系统​不关心数据​只关心2.1 Job 的本质type SchedulerJob Function { id?: number flags?: number }没有 id直接 push 进队列有 id按照顺序通过二分查找插入到合适的位置Job ≈ effect.run / component update2.2 核心队列const queue: SchedulerJob[] []所有待执行任务都会进这个队列。2.3 任务去重const queued new SetSchedulerJob()同一个 job一个 flush 周期只会进队一次三、调度入口queueJobexport function queueJob(job: SchedulerJob) { if (!queued.has(job)) { queued.add(job) queue.push(job) queueFlush() } }去重比如说count多次最终的更新只需要一次入队触发 flush四、flush真正执行的地方function queueFlush() { if (!isFlushing) { isFlushing true resolvedPromise.then(flushJobs) } }Vue 的调度基于 microtaskPromise.then所以同步代码 → 全跑完 ↓ flushJobs统一执行五、flushJobs 的核心逻辑function flushJobs() { try { // 批量执行 所有 job 集中执行一次 for (let i 0; i queue.length; i) { const job queue[i] job() } } finally { queue.length 0 queued.clear() isFlushing false } }六、组件更新的调度每个组件都有一个 render effectconst effect new ReactiveEffect(componentUpdateFn)scheduler 被设置为scheduler () queueJob(update) // UI 更新state change ↓ trigger ↓ component render effect.scheduler ↓ queueJob(update) ↓ flushJobs异步更新 ↓ update() → render()七、computed / watch 在调度系统中的位置7.1 computed 的 schedulerscheduler () { dirty true trigger(computed.dep) }computed 的任务调度不进 scheduler 队列queueJob只影响依赖它的 effect7.2 watch 的 schedulerscheduler () { queueJob(job) }watch ​直接进入调度系统​具体进入哪个优先层级取决于 flush 默认为 queueJob八、flush: pre / post / syncVue 的调度系统不是一个队列而是三个层级三种 flush 模式8.1 pre 队列默认 watchqueuePreFlushCb(job)用于watchbeforeUpdate8.2 post 队列DOM 后queuePostFlushCb(job)用于watch(flush: ‘post’)onMounted / onUpdated8.3 执行顺序flushPreFlushCbs ↓ flushJobs组件更新 ↓ flushPostFlushCbs九、nextTick 的本质export function nextTick(fn?) { return fn ? resolvedPromise.then(fn) : resolvedPromise }所以​nextTick 本质是等当前调度周期 flush 完在原本调度系统 ​​Promise.then(调度任务队列)​​​ 的后面又拼接了一个 ​.then(nextTick任务)​DOM 更新会在原本的调度系统中所以 nextTick 在开发中一般用于获取最新的 DOM 。十、简单示例watch(state, () console.log(watch)) state.count console.log(sync) nextTick(() console.log(tick))执行顺序sync watch render tick十一、为什么 Vue 不用 setTimeout / requestAnimationFrameVue 的目标是“同步代码结束后立刻统一刷新”