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 相关文章推荐
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
初识Node.js
Mar 20 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
基于jquery实现图片放大功能
May 07 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP的FTP学习(四)
2006/10/09 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python抓取百度首页的方法
2015/05/19 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
汽车检测与维修个人求职信
2013/09/24 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
承诺书模板大全
2015/05/04 职场文书
推销搭讪开场白
2015/05/28 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
Python实现天气查询软件
2021/06/07 Python
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android