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 相关文章推荐
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
js实现简单选项卡功能
Mar 23 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 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/10/09 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python tkinter事件高级用法实例
2018/01/31 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
演讲稿格式
2014/04/30 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
教师岗位说明书
2015/09/30 职场文书