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验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
基于Vue实现timepicker
Apr 25 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
express启用https使用小记
May 21 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,js双版本
2012/09/25 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Python闭包实现计数器的方法
2015/05/05 Python
深入讲解Python编程中的字符串
2015/10/14 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
提拔干部考察材料
2014/05/26 职场文书
机关作风整顿个人剖析材料
2014/10/06 职场文书
辩护词格式
2015/05/22 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL