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 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 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/17 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
php通过array_merge()函数合并两个数组的方法
2015/03/18 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jquery重新播放css动画所遇问题解决
2013/08/21 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
软件测试工程师结构化面试题库
2016/11/23 面试题
高三自我评价
2014/02/01 职场文书
纠风工作实施方案
2014/03/15 职场文书
企业安全标语
2014/06/07 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
邀请书格式范文
2015/02/02 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js