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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
javascript 闭包详解
Feb 15 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 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
PHP中PDO基础教程 入门级
2011/09/04 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
vue实现分页加载效果
2019/12/24 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
python同步windows和linux文件
2019/08/29 Python
python 实现return返回多个值
2019/11/19 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
Why do we need Unit test
2013/01/03 面试题
中文系师范生自荐信
2013/10/01 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
在校生自我鉴定
2014/01/23 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
应届大学生求职信
2014/07/20 职场文书
防汛工作情况汇报
2014/10/28 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
OpenCV-Python实现油画效果的实例
2021/06/08 Python