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 01 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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生成带有雪花背景的验证码
2008/09/28 PHP
php动态生成JavaScript代码
2009/03/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
初学Python实用技巧两则
2014/08/29 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python常用库推荐
2016/12/04 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
详解python字节码
2018/02/07 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python sleep和wait对比总结
2021/02/03 Python
Oracle快照(snapshot)
2015/03/13 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
迎接领导欢迎词
2014/01/11 职场文书
晚宴邀请函范文
2014/01/15 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL
MySQL数据库 安全管理
2022/05/06 MySQL