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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue2.0 + ele的循环表单及验证字段方法
Sep 18 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 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
综合图片计数器
2006/10/09 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
优化javascript的执行速度
2010/01/23 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
wxPython窗口的继承机制实例分析
2014/09/28 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python实现梯度法 python最速下降法
2020/03/24 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
期末评语大全
2014/05/04 职场文书
投标授权委托书范文
2014/08/02 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
公司开会通知
2015/04/20 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers