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 树控件 比较好用
Jun 11 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
基于jquery实现复选框全选,反选,全不选等功能
Oct 16 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue使用recorder.js实现录音功能
2019/11/22 Javascript
初步认识Python中的列表与位运算符
2015/10/12 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
岗位说明书怎么写
2014/07/30 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
公司委托书格式范文
2014/10/09 职场文书
道歉短信大全
2015/05/12 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
详解php中流行的rpc框架
2021/05/29 PHP