vue.js源代码core scedule.js学习笔记


Posted in Javascript onJuly 03, 2017

vue.js 源代码学习笔记 core scedule.js,供大家参考,具体内容如下

/* @flow */

import type Watcher from './watcher'
import config from '../config'
import { callHook } from '../instance/lifecycle'

import {
 warn,
 nextTick,
 devtools
} from '../util/index'

const queue: Array<Watcher> = []
let has: { [key: number]: ?true } = {}
let circular: { [key: number]: number } = {}
let waiting = false
let flushing = false
let index = 0

/**
 * Reset the scheduler's state.
 */
function resetSchedulerState () {
 queue.length = 0
 has = {}
 if (process.env.NODE_ENV !== 'production') {
 circular = {}
 }
 waiting = flushing = false
}

/**
 * Flush both queues and run the watchers.
 */
function flushSchedulerQueue () {
 flushing = true
 let watcher, id, vm

 // Sort queue before flush.
 // This ensures that:
 // 1. Components are updated from parent to child. (because parent is always
 // created before the child)
 // 2. A component's user watchers are run before its render watcher (because
 // user watchers are created before the render watcher)
 // 3. If a component is destroyed during a parent component's watcher run,
 // its watchers can be skipped.
 queue.sort((a, b) => a.id - b.id)

 // do not cache length because more watchers might be pushed
 // as we run existing watchers
 for (index = 0; index < queue.length; index++) {
 watcher = queue[index]
 id = watcher.id
 has[id] = null
 watcher.run()
 // in dev build, check and stop circular updates.
 if (process.env.NODE_ENV !== 'production' && has[id] != null) {
  circular[id] = (circular[id] || 0) + 1
  if (circular[id] > config._maxUpdateCount) {
  warn(
   'You may have an infinite update loop ' + (
   watcher.user
    ? `in watcher with expression "${watcher.expression}"`
    : `in a component render function.`
   ),
   watcher.vm
  )
  break
  }
 }
 }

 // reset scheduler before updated hook called
 const oldQueue = queue.slice()
 resetSchedulerState()

 // call updated hooks
 index = oldQueue.length
 while (index--) {
 watcher = oldQueue[index]
 vm = watcher.vm
 if (vm._watcher === watcher && vm._isMounted) {
  callHook(vm, 'updated')
 }
 }

 // devtool hook
 /* istanbul ignore if */
 if (devtools && config.devtools) {
 devtools.emit('flush')
 }
}

/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
 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 >= 0 && queue[i].id > watcher.id) {
  i--
  }
  queue.splice(Math.max(i, index) + 1, 0, watcher)
 }
 // queue the flush
 if (!waiting) {
  waiting = true
  nextTick(flushSchedulerQueue)
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 #Javascript
JavaScript生成图形验证码
Aug 24 #Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
mac上node.js环境的安装测试
Jul 03 #Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 #Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 #Javascript
vue.js学习之UI组件开发教程
Jul 03 #Javascript
You might like
PHP安全配置详细说明
2011/09/26 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python中property属性实例解析
2018/02/10 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
餐饮业员工工作决心书
2014/03/11 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
介绍信如何写
2015/01/31 职场文书
学术会议通知范文
2015/04/15 职场文书
建国大业观后感
2015/06/01 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers