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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 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/07/12 PHP
提升PHP速度全攻略
2006/10/09 PHP
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
json格式的javascript对象用法分析
2016/07/04 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
简述Python2与Python3的不同点
2018/01/21 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python实现烟花小程序
2019/01/30 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
pytorch构建多模型实例
2020/01/15 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
澳大利亚运动鞋零售商:The Athlete’s Foot
2018/11/04 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
求职自荐书范文
2013/12/04 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
企业消防安全制度
2014/02/02 职场文书
保健品市场营销方案
2014/03/31 职场文书
学术诚信承诺书
2014/05/26 职场文书
实验室的标语
2014/06/20 职场文书
园林技术专业求职信
2014/07/28 职场文书
学校食堂标语
2014/10/06 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
作弊检讨书范文
2015/05/06 职场文书
在人间读书笔记
2015/06/30 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers