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实现漂亮的动态信息提示效果
Aug 02 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
JavaScript实现简单的拖动效果
Jul 02 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
tab栏切换原理
Mar 22 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
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 UTF8编码内的繁简转换类
2009/07/20 PHP
几款免费开源的不用数据库的php的cms
2010/12/19 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python if语句知识点用法总结
2018/06/10 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
一道Delphi上机题
2012/06/04 面试题
毕业生找工作推荐信
2013/11/21 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
质量承诺书范文
2014/03/27 职场文书
企业理念标语
2014/06/09 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
教师辞职信范文
2015/02/28 职场文书
Docker安装MySql8并远程访问的实现
2022/07/07 Servers