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判断表单为空及获取焦点的方法
Feb 12 Javascript
node.js实现端口转发
Apr 14 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
js实现双色球效果
Aug 02 Javascript
浅谈JavaScript 声明提升
Sep 14 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中的字符串函数
2006/11/24 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
Python yield使用方法示例
2013/12/04 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python实现定时发送qq消息
2019/01/18 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python3列表List入门知识附实例
2020/02/09 Python
浅析python标准库中的glob
2020/03/13 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
办公室文员自荐书
2014/02/03 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
离婚起诉状范本
2015/05/19 职场文书
热血教师观后感
2015/06/10 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
golang中的空slice案例
2021/04/27 Golang
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python