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 相关文章推荐
JS实现点击下载的小例子
Jul 10 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
javascript实现前端分页功能
Nov 26 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
4.与数据库的连接
2006/10/09 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python中的zip函数使用示例
2015/01/29 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
护理自我鉴定范文
2013/10/06 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
大学生党员个人总结
2015/02/13 职场文书
教师节慰问信
2015/02/15 职场文书
家长反馈意见及建议
2015/06/03 职场文书
办公用品管理制度
2015/08/04 职场文书