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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
js读取本地文件的实例
Dec 22 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JavaScipt基本教程之前言
2008/01/16 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
jquery实现左右轮播切换效果
2018/01/01 jQuery
微信小程序实现刷脸登录
2018/05/25 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python简单计算文件夹大小的方法
2015/07/14 Python
Python实现配置文件备份的方法
2015/07/30 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
基本款天堂:Everlane
2017/05/13 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
见习期自我鉴定
2014/01/31 职场文书
服务员岗位责任制
2014/02/11 职场文书
物理学专业自荐信
2014/06/11 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android