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 相关文章推荐
javascript中的float运算精度实例分析
Aug 21 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
Jul 24 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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函数实现判断是否移动端访问
2015/03/03 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
微信小程序报错:this.setData is not a function的解决办法
2017/09/27 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python中bisect的用法
2014/09/23 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
python学习教程之使用py2exe打包
2017/09/24 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python可迭代对象操作示例
2019/05/07 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
会计求职信怎么写
2015/03/20 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
企业计划生育责任书
2015/05/09 职场文书
一个都不能少观后感
2015/06/04 职场文书
小学生运动会广播
2015/08/19 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
SQL Server中搜索特定的对象
2022/05/25 SQL Server