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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 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
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue中如何使用ztree
2018/02/06 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python 使用get_argument获取url query参数
2017/04/28 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python调用百度语音识别api
2018/08/30 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
python基于递归解决背包问题详解
2019/07/03 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
小学生学习保证书
2015/02/26 职场文书
会计工作态度自我评价
2015/03/06 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript