📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • Vue调度系统
  • 如何执行更新
  • 更新的时机
在GitHub上编辑
  1. 源码解析
  2. Vue源码解析

Vue2源码解析系列-调度系统(todo)

status: Idea Created time: January 27, 2024 4:55 PM

Vue调度系统

Vue.js 以其高效、灵活的响应式系统著称,而这背后,离不开调度系统(Scheduler)的精妙设计。它负责协调 Vue 应用的更新过程,确保视图与数据的同步,并维护整体的性能表现。

调度系统的核心职责:

  • 管理 watchers(监听器),当数据发生变化时,通知相关的 watchers 执行。

  • 执行组件更新,包括重新计算属性、渲染模板、更新 DOM 等。

  • 控制更新的批处理,将多次更新合并为一次,减少 DOM 操作,提升性能。

  • 处理异步操作,保证数据的一致性和更新的顺序。

如何执行更新

首先需要知道,vue不是即使更新的,当你更新某个状态时,对应的依赖并不会马上进行更新,而是会先存起来,然后每间隔一段时间再统一进行批量更新,这种方式主要是为了优化性能,特别是更新组件时,vue需要进行diff虚拟DOM和更新DOM,这些操作是非常影响性能的,倘若状态一改变就立马更新,那么就很可能遇到这种情况:

{
	for(let i=0;i<100;i++){
		this.num++;
	}
}

this.num更新了100次,然而其实只有最后一次才是我们需要的,前面99次都是没用的,然后假如vue是即使更新的,那么vue就会做了99次无用功。

vue实际上会通过一个队列(callbacks)来暂存watcher,每当有组件、监听器或计算属性等需要更新时,就会将其对应的更新函数按照wathcer.id排序放到这个队列中,之后按照一定规律进行批量更新。下面是vue2将需要更新的watcher入队的函数代码:

const queue: Array<Watcher> = []

export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  if (has[id] != null) {
    return
  }

  if (watcher === Dep.target && watcher.noRecurse) {
    return
  }

  has[id] = true
  if (!flushing) {
    queue.push(watcher)
  } else {
    // if already flushing, splice the watcher based on its id
    // if already past its id, it will be run next immediately.
    let i = queue.length - 1
    while (i > index && queue[i].id > watcher.id) {
      i--
    }
    queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true

    if (__DEV__ && !config.async) {
      flushSchedulerQueue()
      return
    }
    nextTick(flushSchedulerQueue)
  }
}

从代码中可以看到:

  1. 首先通过watcher.id进行去重,这是为了避免重复更新

  2. 如果当前 watcher 是触发更新的 watcher 本身,并且它禁止递归触发,就直接返回,避免无限循环。

  3. 判断当前是否正在更新中

    1. 如果不是

      1. 那么直接将watcher对象添加至队尾

    2. 如果是

      1. 根据wather.id将watcher排序到队列对应的位置,id越小越靠前

callback数组保存了模板语法、计算属性、监听器等等更新方法,在适当的时机执行这些更新方法,来进行更新操作。

export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  if (has[id] != null) {
    return
  }

  if (watcher === Dep.target && watcher.noRecurse) {
    return
  }

  has[id] = true
  if (!flushing) {
    queue.push(watcher)
  } else {
    // if already flushing, splice the watcher based on its id
    // if already past its id, it will be run next immediately.
    let i = queue.length - 1
    while (i > index && queue[i].id > watcher.id) {
      i--
    }
    queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true

    if (__DEV__ && !config.async) {
      flushSchedulerQueue()
      return
    }
    nextTick(flushSchedulerQueue)
  }
}

更新的时机

上一页Patch下一页Vue2组件更新流程(todo)