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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
Vue 数据响应式相关总结
Jan 28 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获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
js实现双色球效果
2020/08/02 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
python使用post提交数据到远程url的方法
2015/04/29 Python
详解Python多线程
2016/11/14 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python实现猜单词小游戏
2020/05/22 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
教师教学评估方案
2014/05/09 职场文书
媒体宣传策划方案
2014/05/25 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
2014年政工师工作总结
2014/12/18 职场文书
使用pytorch实现线性回归
2021/04/11 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
vue代码分块和懒加载非必要资源文件
2022/04/11 Vue.js
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python