直播敲Vue吗哈哈哈哈，参加吗
array.js
/*
* not type checking this file because flow doesn't play well with
* dynamically accessing methods on Array prototype
*/
/**
* 定义 arrayMethods 对象，用于增强 Array.prototype
* 当访问 arrayMethods 对象上的那七个方法时会被拦截，以实现数组响应式
*/
import { def } from '../util/index'
/**
* 备份 数组 原型对象
*/
// 基于数组原型对象创建一个新的对象
// 复写 （增强）数组原型方法，使其具有依赖通知更新的能力
const arrayProto = Array.prototype
/**
* 通过继承的方式创建新的 arrayMethods
*/
export const arrayMethods = Object.create(arrayProto)
/**
* 操作数组的七个方法，这七个方法可以改变数组自身
*/
const methodsToPatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]
/**
* Intercept mutating methods and emit events
* 遍历这七个方法
*/
/**
* 拦截变异方法并触发事件
*/
methodsToPatch.forEach(function (method) {
// cache original method
// 以push方法为例，获取 arrayProto.push 的原生方法
/**
* 缓存原生方法，比如 push
*/
const original = arrayProto[method]
// 分别在 arrayMethods 对象上定义那七个方法
// 比如后续执行 arr.push()
/**
* def 就是 Object.defineProperty，拦截 arrayMethods.method 的访问
*/
def(arrayMethods, method, function mutator (...args) {
// 先执行原生的push方法，往数组中放置新的数据
/**
* 先执行原生方法，比如 push.apply(this, args)
*/
const result = original.apply(this, args)
const ob = this.__ob__
/**
* 如果 method 是以下三个之一，说明是新插入了元素
*/
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
// 如果你执行的是 push unshift splice 操作的话，进行响应式处理
/**
* 对新插入的元素做响应式处理
*/
if (inserted) ob.observeArray(inserted)
// notify change
// 执行 dep.notify 方法进行依赖通知更新
/**
* 通知更新
*/
ob.dep.notify()
return result
})
})
dep.js
/* @flow */
import type Watcher from './watcher'
import { remove } from '../util/index'
import config from '../config'
let uid = 0
/**
* A dep is an observable that can have multiple
* directives subscribing to it.
*/
/**
* 一个 dep 对应一个 obj.key
* 在读取响应式数据时，负责收集依赖，每个 dep (或者说 obj.key）依赖的 watcher 有哪些
* 在响应式数据更新时，负责通知 dep 中那些 watcher 去执行 update 方法
*/
export default class Dep {
static target: ?Watcher;
id: number;
subs: Array<Watcher>;
constructor () {
this.id = uid++
this.subs = []
}
// 在 dep 中添加 watcher
addSub (sub: Watcher) {
this.subs.push(sub)
}
removeSub (sub: Watcher) {
remove(this.subs, sub)
}
// 像 watcher 中添加 dep
depend () {
// Dep.target 为 (property) Dep.target: Watcher
if (Dep.target) {
Dep.target.addDep(this)
}
}
/**
* 通知 dep 中的所有 watcher，执行 watcher.update() 方法
*/
notify () {
// stabilize the subscriber list first
const subs = this.subs.slice()
if (process.env.NODE_ENV !== 'production' && !config.async) {
// subs aren't sorted in scheduler if not running async
// we need to sort them now to make sure they fire in correct
// order
subs.sort((a, b) => a.id - b.id)
}
// 遍历当前 dep 收集所有watcher，让这些watcher依次去执行自己的update方法
/**
* 遍历 dep 中存储的 watcher，执行 watcher.update()
*/
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update()
}
}
}
// The current target watcher being evaluated.
// This is globally unique because only one watcher
// can be evaluated at a time.
/**
* 当前正在执行的 watcher，同一时间只会有一个 watcher 在执行
* Dep.target = 当前正在执行的 watcher
* 通过调用 pushTarget 方法完成赋值，调用 popTarget 方法完成重置（null)
*/
Dep.target = null
const targetStack = []
// 在需要进行依赖收集的时候调用，设置 Dep.target = watcher
export function pushTarget (target: ?Watcher) {
targetStack.push(target)
Dep.target = target
}
// 依赖收集结束调用，设置 Dep.target = null
export function popTarget () {
targetStack.pop()
Dep.target = targetStack[targetStack.length - 1]
}
index.js
/* @flow */
import Dep from './dep'
import VNode from '../vdom/vnode'
import { arrayMethods } from './array'
import {
def,
warn,
hasOwn,
hasProto,
isObject,
isPlainObject,
isPrimitive,
isUndef,
isValidArrayIndex,
isServerRendering
} from '../util/index'
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
/**
* In some cases we may want to disable observation inside a component's
* update computation.
*/
/**
* 在某些情况下，我们可能想要禁用组件内部的观察
* 更新计算
*/
export let shouldObserve: boolean = true
export function toggleObserving (value: boolean) {
shouldObserve = value
}
/**
* Observer class that is attached to each observed
* object. Once attached, the observer converts the target
* object's property keys into getter/setters that
* collect dependencies and dispatch updates.
*/
/**
* 观察者类，会被附加到每个被观察的对象上， value.__ob__ = this
* 而对象的 各个属性则会被转换成 getter / setter ，并收集依赖和通知更新
*/
export class Observer {
value: any;
dep: Dep;
/**
* 将该对象作为根 $data 的 vms 个数
*/
vmCount: number; // number of vms that have this object as root $data
constructor (value: any) {
this.value = value
// 实例化一个 dep
this.dep = new Dep()
this.vmCount = 0
// 在 value 对象上设置 __ob__ 属性
def(value, '__ob__', this)
if (Array.isArray(value)) {
// 处理数组响应式
// 判断是否有 __proto__ 属性
// obj.__proto__ 访问对象的原型链
/**
* value 为数组
* hasProto = '__proto__' in {}
* 用于判断对象是否存在 __proto__ 属性，通过 obj.__proto__ 可以访问对象的原型链
* 但由于 __proto__ 不是标准属性，所以有些浏览器不支持，比如 IE6-10，Opera10.1
* 为什么要判断，是因为一会儿要通过 __proto__ 操作数据的原型链
* 覆盖数组默认的七个原型方法，以实现数组响应式
*/
if (hasProto) {
// 有 __proto__
protoAugment(value, arrayMethods)
} else {
copyAugment(value, arrayMethods, arrayKeys)
}
this.observeArray(value)
} else {
// 处理对象响应式
/**
* value 为对象，为对象的每个属性（包括嵌套对象）设置响应式
*/
this.walk(value)
}
}
/**
* Walk through all properties and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
/**
* 遍历对象上的每个 key，为每个 key 设置响应式
* 仅当值为对象时才会走这里
*/
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/**
* Observe a list of Array items.
* 遍历数组，为数组的每一项设置观察，处理数组元素为对象的情况
*/
observeArray (items: Array<any>) {
// 遍历数组的每一项，对其进行观察（响应式处理）
for (let i = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}
// helpers
/**
* Augment a target Object or Array by intercepting
* the prototype chain using __proto__
*/
/**
* 设置 target.__proto__ 的原型对象为 src
* 比如 数组对象， arr.__proto__ = arrayMethods
*/
function protoAugment (target, src: Object) {
// 用经过增强的数组原型方法，覆盖默认的原型方法，之后你再执行那七个数组方法时就具有了依赖通知更新的能力，以达到实现数组响应式的目的
/* eslint-disable no-proto */
target.__proto__ = src
/* eslint-enable no-proto */
}
/**
* Augment a target Object or Array by defining
* hidden properties.
* 通过定义扩充目标对象或数组
* 隐藏属性
* 将增强的那七个方法直接赋值到数组对象上
*/
/**
* 在目标对象上定义指定属性
* 比如数组：为数组对象定义那七个方法
*/
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
for (let i = 0, l = keys.length; i < l; i++) {
const key = keys[i]
def(target, key, src[key])
}
}
/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
* 尝试为一个值创建一个观察者实例
* 如果成功观察，则返回新的观察者
* 或现有的观察者（如果值已经有）
* 响应式处理的入口
*/
/**
* 响应式处理的真正入口
* 为对象创建观察者实例，如果对象已经被观察过，则返回已有的观察者实例，否则创建新的观察者实例
* @param {*} value 对象 => {}
*/
export function observe (value: any, asRootData: ?boolean): Observer | void {
// 非对象和 VNode 实例不做响应式处理
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
// 如果 value 对象上存在 __ob__ 属性，则表示已经做过观察了，直接返回 __ob__ 属性
ob = value.__ob__
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
/**
* 创建观察者实例
*/
// 实例化 Observer,进行响应式处理
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
/**
* Define a reactive property on an Object.
* 处理响应式核心的地方
*/
/**
* 拦截 obj[key] 的读取和设置操作：
* 1.在第一次读取收集依赖，比如执行 render 函数生成虚拟 DOM 时会读取操作
* 2.在更新时设置新值并通知依赖更新
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// 实例化一个dep，一个 key 对应一个dep
const dep = new Dep()
// 获取属性描述符
/**
* 获取 obj[key] 的属性描述符，发现它是不可配置对象的话直接 return
*/
const property = Object.getOwnPropertyDescriptor(obj, key)
if (property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
/**
* 记录 getter 和 setter，获取 val 值
*/
const getter = property && property.get
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
val = obj[key]
}
// 通过递归的方式处理 val 为对象的情况，即处理嵌套对象
/**
* 递归调用，处理 val 即 obj[key] 的值为对象的情况，保证对象中的所有 key 都被观察
*/
let childOb = !shallow && observe(val)
// 拦截对obj[key]的访问和设置
/**
* 响应式核心
*/
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
// 拦截 obj.key，进行依赖收集以及返回最新的值
/**
* get拦截对 obj[key] 的读取操作
*/
get: function reactiveGetter () {
// obj.key 的值
const value = getter ? getter.call(obj) : val
/**
* Dep.target 为 Dep 类的一个静态属性，值为 watcher，在实例化 Watcher 时会被设置
* 实例化 Watcher 时会执行 new Watcher 时传递的回调函数（computed 除外，因为它懒执行）
* 而回调函数中如果有 vm.key 的读取行为，则会触发这里的 读取拦截，进行依赖收集
* 回调函数执行完以后又会将 Dep.target 设置为 null，避免这里重复收集依赖
*/
if (Dep.target) {
// 读取时进行的依赖收集，将dep添加到watcher中，也将watcher添加到dep中
/**
* 依赖收集，在 dep 中添加 watcher，也在 watcher 中添加 dep
*/
dep.depend()
/**
* childOb 表示对象中嵌套对象的观察者对象，如果存在也对其进行依赖收集
*/
if (childOb) {
// 对嵌套对象也进行依赖收集
/**
* 这就是 this.key.childKey 被更新时能触发响应式更新的原因
*/
childOb.dep.depend()
/**
* 如果是 obj[key] 是数组，则触发数组响应式
*/
if (Array.isArray(value)) {
// 处理嵌套值为数组的情况
/**
* 为数组项为对象的项添加依赖
*/
dependArray(value)
}
}
}
return value
},
// 拦截 obj.key = newVal 的操作
/**
* set 拦截对 obj[key] 的设置操作
*/
set: function reactiveSetter (newVal) {
// 首先获取老值
/**
* 旧的 obj[key]
*/
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
/**
* 如果新老值一样，则直接 return，不跟新更不触发响应式更新过程
*/
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
// #7981: for accessor properties without setter
/**
* setter 不存在说明该属性是一个只读属性，直接 return
*/
if (getter && !setter) return
// 这是新值，用新值替换老值
/**
* 设置新值
*/
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// 对新值做响应式处理
/**
* 对新值进行观察，让新值也是响应式的
*/
childOb = !shallow && observe(newVal)
// 当响应式数据更新时，做依赖通知更新
/**
* 依赖通知更新
*/
dep.notify()
}
})
}
/**
* Set a property on an object. Adds the new property and
* triggers change notification if the property doesn't
* already exist.
*/
/**
* 通过 Vue.set 或者 this.$set 方法给 target 的指定 key 设置值 val
* 如果 target 是对象，并且 key 原本不存在，则为新 key 设置响应式，然后执行依赖通知
*/
export function set (target: Array<any> | Object, key: any, val: any): any {
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 处理数组 Vue.set(arr, idx, val)
/**
* 更新数组指定下标的元素，Vue.set(array,idx,val)，通过 splice 方法实现响应式更新
*/
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.length = Math.max(target.length, key)
// 利用数组的 splce 方法实现
target.splice(key, 1, val)
return val
}
// 处理对象的情况
/**
* 更新对象已有属性， Vue.set(obj, key, val)，执行更新即可
*/
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
const ob = (target: any).__ob__,
/**
* 不能向 Vue 实例 或者 $data 添加动态响应式属性， vmCount 的用处之一，
* this.$data 的 ob.vmCount = 1，表示根组件，其它子组件的 vm.vmCount 都是 0
*/
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
// target 不是响应式对象，新属性会被设置，但是不会做响应式处理
if (!ob) {
target[key] = val
return val
}
// 对新属性设置getter和setter，读取时收集依赖，更新时触发依赖通知更新
/**
* 给对象定义新属性，通过 defineReactive 方法设置响应式，并触发依赖更新
*/
defineReactive(ob.value, key, val)
// 直接进行依赖通知更新
ob.dep.notify()
return val
}
/**
* Delete a property and trigger change if necessary.
*/
/**
* 通过 Vue.delete 或者 vm.$delete 删除 target 对象的指定 key
* 数组通过 splice 方法实现，对象则通过 delete 运算符删除指定 key，并执行依赖通知
*/
export function del (target: Array<any> | Object, key: any) {
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 数组，还是利用splice方法实现删除元素
/**
* target 为数组，则通过 splice 方法删除指定下标的元素
*/
if (Array.isArray(target) && isValidArrayIndex(key)) {
target.splice(key, 1)
return
}
const ob = (target: any).__ob__
/**
* 避免删除 Vue 实例的属性或者 $data 的数据
*/
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid deleting properties on a Vue instance or its root $data ' +
'- just set it to null.'
)
return
}
// 处理对象的情况
/**
* 如果属性不存在直接结束
*/
if (!hasOwn(target, key)) {
return
}
// 使用delete操作符删除对象上的属性
/**
* 通过 delete 运算符删除对象的属性
*/
delete target[key]
if (!ob) {
return
}
// 触发依赖通知更新
/**
* 执行依赖通知
*/
ob.dep.notify()
}
/**
* Collect dependencies on array elements when the array is touched, since
* we cannot intercept array element access like property getters.
* 处理数组选项为对象的情况，对其进行依赖收集，因为前面的所有处理都没办法对数组项为对象的元素进行依赖收集
* 数组中对象 依赖收集
*/
/**
* 遍历每个数组元素，递归处理数组项为对象的情况，为其添加依赖
* 因为前面的递归阶段无法为数组中的对象元素添加依赖
*/
function dependArray (value: Array<any>) {
for (let e, i = 0, l = value.length; i < l; i++) {
e = value[i]
e && e.__ob__ && e.__ob__.dep.depend()
if (Array.isArray(e)) {
dependArray(e)
}
}
}
scheduler.js
/* @flow */
import type Watcher from './watcher'
import config from '../config'
import { callHook, activateChildComponent } from '../instance/lifecycle'
import {
warn,
nextTick,
devtools,
inBrowser,
isIE
} from '../util/index'
export const MAX_UPDATE_COUNT = 100
const queue: Array<Watcher> = []
const activatedChildren: Array<Component> = []
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 () {
index = queue.length = activatedChildren.length = 0
has = {}
if (process.env.NODE_ENV !== 'production') {
circular = {}
}
waiting = flushing = false
}
// Async edge case #6566 requires saving the timestamp when event listeners are
// attached. However, calling performance.now() has a perf overhead especially
// if the page has thousands of event listeners. Instead, we take a timestamp
// every time the scheduler flushes and use that for all event listeners
// attached during that flush.
/**
* 异步边缘大小写 #6566 需要保存时间戳，当事件监听器是连接。然而，调用 performance.now() 有一个特别的性能开销
* 如果页面有数千个事件监听器。相反，我们取一个时间戳
* 每次调度程序刷新时，并将其用于所有事件侦听器
* 在刷新期间附加
*/
export let currentFlushTimestamp = 0
// Async edge case fix requires storing an event listener's attach timestamp.
/**
* 异步边缘情况修复需要存储事件监听器的附加时间戳
*/
let getNow: () => number = Date.now
// Determine what event timestamp the browser is using. Annoyingly, the
// timestamp can either be hi-res (relative to page load) or low-res
// (relative to UNIX epoch), so in order to compare time we have to use the
// same timestamp type when saving the flush timestamp.
// All IE versions use low-res event timestamps, and have problematic clock
// implementations (#9632)
/**
* 确定浏览器使用的事件时间戳
* 时间戳可以时高分辨率（相对于页面加载）或低分辨率
* （相对于UNIX epoch），因此为了比较时间，我们必须使用
* 保存flush时间戳时，时间戳类型相同
* 所有IE版本都使用低分辨率的事件时间戳，并且时钟有问题
* 实现
*/
if (inBrowser && !isIE) {
const performance = window.performance
if (
performance &&
typeof performance.now === 'function' &&
getNow() > document.createEvent('Event').timeStamp
) {
// if the event timestamp, although evaluated AFTER the Date.now(), is
// smaller than it, it means the event is using a hi-res timestamp,
// and we need to use the hi-res version for event listener timestamps as
// well.
/**
* 如果事件时间戳是在 Date.now() 之后计算的
* 小于它，表示事件使用高分辨率时间戳
* 我们需要使用事件监听器时间戳的高分辨率版本
*/
getNow = () => performance.now()
}
}
/**
* Flush both queues and run the watchers.
* 刷新队列，由 flushCallbacks 函数负责调用，主要做了如下两件事：
* 1.更新 flushing 为 true，表示正在刷新队列，在此期间往队列中 push 新的 watcher 时需要特殊处理（讲其放在队列的合适位置）
* 2.按照队列中的 watcher.id 从小打大排序，保证先创建的 watcher 先执行，也配合 第一步
* 3.遍历 watcher 队列，依次执行 watcher.before、watcher.run，并清除缓存的 watcher
*/
function flushSchedulerQueue () {
currentFlushTimestamp = getNow()
// flushing置true，表述现在的watcher队列正在被刷新
/**
* 标志现在正在刷新队列
*/
flushing = true
let watcher, id
// 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.
/**
* 刷新队列之前先给队列排序（升序），可以保证：
* 1、组件的更新顺序为从父级到子级，因为父组件总是在子组件之前被创建
* 2、一个组件的用户 watcher 在其渲染 watcher 之前被执行，因为用户 watcher 先于 渲染 watcher 创建
* 3、如果一个组件在其父组件的 watcher 执行期间被销毁，则它的 watcher 可以被跳过
* 排序以后在刷新队列期间新进来的 watcher 也会按顺序放入队列的合适位置
*/
queue.sort((a, b) => a.id - b.id)
// do not cache length because more watchers might be pushed
// as we run existing watchers
// for 循环遍历watcher队列，依次执行watcher的run方法
/**
* 这里直接使用了 queue.length，动态计算队列的长度，没有缓存长度，是因为在执行现有 watcher 期间队列中可能会被 push 进新的 watcher
*/
for (index = 0; index < queue.length; index++) {
// 拿出当前索引的 watcher
watcher = queue[index]
// 首先执行 before 钩子
/**
* 执行 before 钩子，在使用 vm.$watch 或者 watch 选项时可以通过配置项（options.before）传递
*/
if (watcher.before) {
watcher.before()
}
/**
* 将缓存的 watcher 清除
*/
// 清空缓存，表示当前 watcher 已经被执行，当该 watcher 再次入队时就可以进来了
id = watcher.id
has[id] = null
// 执行 watcher 的run 方法
/**
* 执行 watcher.run，最终触发更新函数，比如 updateComponent 或者 获取 this.xx（xx 为用户 watch 的第二个参数），当然第二个参数也有可能是一个函数，那就直接执行
*/
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] > MAX_UPDATE_COUNT) {
warn(
'You may have an infinite update loop ' + (
watcher.user
? `in watcher with expression "${watcher.expression}"`
: `in a component render function.`
),
watcher.vm
)
break
}
}
}
// keep copies of post queues before resetting state
/**
* 在重置状态之前保留post队列的副本
*/
const activatedQueue = activatedChildren.slice()
const updatedQueue = queue.slice()
/**
* 重置调度状态：
* 1、重置 has 缓存对象，has = {}
* 2、waiting = flushing = false，表示刷新队列结束
* waiting = flushing = false，表示可以像 callbacks 数组中放入新的 flushSchedulerQueue 函数，并且可以向浏览器的任务队列放入下一个 flushCallbacks 函数了
*/
resetSchedulerState()
// call component updated and activated hooks
/**
* 调用组件更新和激活钩子
*/
callActivatedHooks(activatedQueue)
callUpdatedHooks(updatedQueue)
// devtool hook
/* istanbul ignore if */
if (devtools && config.devtools) {
devtools.emit('flush')
}
}
function callUpdatedHooks (queue) {
let i = queue.length
while (i--) {
const watcher = queue[i]
const vm = watcher.vm
if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'updated')
}
}
}
/**
* Queue a kept-alive component that was activated during patch.
* The queue will be processed after the entire tree has been patched.
*/
export function queueActivatedComponent (vm: Component) {
// setting _inactive to false here so that a render function can
// rely on checking whether it's in an inactive tree (e.g. router-view)
vm._inactive = false
activatedChildren.push(vm)
}
function callActivatedHooks (queue) {
for (let i = 0; i < queue.length; i++) {
queue[i]._inactive = true
activateChildComponent(queue[i], true /* true */)
}
}
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
/**
* 将 watcher 放入 watcher 队列
*/
export function queueWatcher (watcher: Watcher) {
const id = watcher.id
// 判重，watcher 不会重复入队
/**
* 如果 watcher 已经存在，则跳过，不会重复入队
*/
if (has[id] == null) {
// 缓存一下，置为true
/**
* 缓存 watcher.id 用于判断 watcher 是否已经入队
*/
has[id] = true
if (!flushing) {
/**
* 当前没有处于刷新队列状态，watcher 直接入队
*/
// 如果 flushing = false，表示当前watcher队列没有在被刷新，watcher直接入队
queue.push(watcher)
} else {
// watcher 队列已经在被刷新了，这时候这个watcher入队就需要特殊操作一下
// 保证watcher入队后，刷新中的watcher队列任然是有序的
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
/**
* 已经在刷新队列了
* 从队列末尾开始倒序遍历，根据当前 watcher.id 找到它大于的 watcher.id 的位置，然后将自己插入到该位置之后的下一个位置
* 即将当前 watcher 放入已排序的队列中，且队列仍是有序的
*/
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
// waiting为false走这里，表示当前浏览器的异步任务队列中没有 flushSchedulerQueue函数
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
// 同步执行，直接去刷新 watcher 队列
// 性能就会大打折扣
/**
* 直接刷新调度队列
* 一般不会走这儿，Vue 默认是异步执行，如果改为同步执行，性能会大打折扣
*/
flushSchedulerQueue()
return
}
// 大家熟悉的那个nextTick，this.$nextTick或者Vue.nextTick
/**
* 熟悉的 nextTick => vm.$nextTick、Vue.nextTick
* 1.将 回调函数（flushSchedulerQueue）放入 callbacks 数组
* 2.通过 pending 控制向浏览器任务队列中添加 flushCallbacks 函数
*/
nextTick(flushSchedulerQueue)
}
}
}
traverse.js
/* @flow */
import { _Set as Set, isObject } from '../util/index'
import type { SimpleSet } from '../util/index'
import VNode from '../vdom/vnode'
const seenObjects = new Set()
/**
* Recursively traverse an object to evoke all converted
* getters, so that every nested property inside the object
* is collected as a "deep" dependency.
*/
/**
* 递归遍历对象以唤起所有已转换的对象
* getter，以便对象内的每个嵌套属性作为“深度”依赖项收集
*/
export function traverse (val: any) {
_traverse(val, seenObjects)
seenObjects.clear()
}
function _traverse (val: any, seen: SimpleSet) {
let i, keys
const isA = Array.isArray(val)
if ((!isA && !isObject(val)) || Object.isFrozen(val) || val instanceof VNode) {
return
}
if (val.__ob__) {
const depId = val.__ob__.dep.id
if (seen.has(depId)) {
return
}
seen.add(depId)
}
if (isA) {
i = val.length
while (i--) _traverse(val[i], seen)
} else {
keys = Object.keys(val)
i = keys.length
while (i--) _traverse(val[keys[i]], seen)
}
}
watcher.js
/* @flow */
import {
warn,
remove,
isObject,
parsePath,
_Set as Set,
handleError,
invokeWithErrorHandling,
noop
} from '../util/index'
import { traverse } from './traverse'
import { queueWatcher } from './scheduler'
import Dep, { pushTarget, popTarget } from './dep'
import type { SimpleSet } from '../util/index'
let uid = 0
/**
* A watcher parses an expression, collects dependencies,
* and fires callback when the expression value changes.
* This is used for both the $watch() api and directives.
*/
/**
* 一个组件一个 watcher （渲染 watcher）或者一个表达式一个 watcher （用户watcher）
* 当数据更新时 watcher 会被触发，访问 this.computedProperty 时也会触发 watcher
*/
export default class Watcher {
vm: Component;
expression: string;
cb: Function;
id: number;
deep: boolean;
user: boolean;
lazy: boolean;
sync: boolean;
dirty: boolean;
active: boolean;
deps: Array<Dep>;
newDeps: Array<Dep>;
depIds: SimpleSet;
newDepIds: SimpleSet;
before: ?Function;
getter: Function;
value: any;
constructor (
vm: Component,
expOrFn: string | Function,
cb: Function,
options?: ?Object,
isRenderWatcher?: boolean
) {
this.vm = vm
if (isRenderWatcher) {
vm._watcher = this
}
vm._watchers.push(this)
// options
if (options) {
this.deep = !!options.deep
this.user = !!options.user
this.lazy = !!options.lazy
this.sync = !!options.sync
this.before = options.before
} else {
this.deep = this.user = this.lazy = this.sync = false
}
this.cb = cb
/**
* 批量处理 Uid
*/
this.id = ++uid // uid for batching
this.active = true
/**
* 懒
*/
this.dirty = this.lazy // for lazy watchers
this.deps = []
this.newDeps = []
this.depIds = new Set()
this.newDepIds = new Set()
this.expression = process.env.NODE_ENV !== 'production'
? expOrFn.toString()
: ''
// parse expression for getter
/**
* 解析 getter 的表达式
*/
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
// 传递 key 进来，this.key
/**
* this.getter = function() { return this.xx }
* 在 this.get 中执行 this.getter 时会触发依赖收集
* 待后续 this.xx 更新时就会触发响应式
*/
this.getter = parsePath(expOrFn)
if (!this.getter) {
this.getter = noop
process.env.NODE_ENV !== 'production' && warn(
`Failed watching path: "${expOrFn}" ` +
'Watcher only accepts simple dot-delimited paths. ' +
'For full control, use a function instead.',
vm
)
}
}
this.value = this.lazy
? undefined
: this.get()
}
/**
* Evaluate the getter, and re-collect dependencies.
* 触发 updateComponent 的执行，进行组件更新，进入patch阶段
* 更新组件时先执行render生成VNode，期间触发读取操作，进行依赖收集
*/
/**
* 执行 this.getter，并重新收集依赖
* this.getter 是实例化 watcher 时传递的第二个参数，一个函数BS或者字符串，比如：updateComponent 或者 parsePath 返回的读取 this.xx 属性值的函数
* 为什么要重新收集依赖？
* 因为触发更新说明有响应式数据被更新了，但是被更新的数据虽然已经经过 observe 观察了，但是却没有进行依赖收集，所以，在更新页面时，会重新执行一次 render 函数，执行期间会触发读取操作，这时候进行依赖收集
*/
get () {
// 执行更新
// 什么情况下才会执行更新？
// 对新值进行依赖收集
// Dep.target = this
/**
* 打开 Dep.target，Dep.target = this
*/
pushTarget(this)
// value 为回调函数执行的结果
let value
const vm = this.vm
try {
// 执行实例化 watcher 时传递进来的第二个参数
// 有可能是一个函数，比如 实例化渲染watcher时传递的updateComponent函数
// 用户watcher，可能传递是一个key，也可能是读取this.key的函数 updateComponent
// 触发读取操作，被setter拦截，进行依赖收集
/**
* 执行回调函数，比如 updateComponent 进入 patch 阶段
*/
value = this.getter.call(vm, vm)
} catch (e) {
if (this.user) {
handleError(e, vm, `getter for watcher "${this.expression}"`)
} else {
throw e
}
} finally {
// "touch" every property so they are all tracked as
// dependencies for deep watching
/**
* touch每个属性，这样它们都被跟踪为
* 深度观察依赖项
*/
if (this.deep) {
traverse(value)
}
/**
* 关闭 Dep.target ，Dep.target = null
*/
popTarget()
this.cleanupDeps()
}
return value
}
/**
* Add a dependency to this directive.
* 将 dep 放到watcher中
*/
/**
* 两件事：
* 1.添加 dep 给自己 (watcher)
* 2.添加 自己 （watcher）到 dep
*/
addDep (dep: Dep) {
/**
* 判重，如果 dep 已经存在则不重复添加
*/
const id = dep.id
if (!this.newDepIds.has(id)) {
/**
* 缓存 dep.id 用于判重
*/
this.newDepIds.add(id)
/**
* 添加 dep
*/
this.newDeps.push(dep)
/**
* 避免在 dep 中重复添加 watcher，this.depIds 的设置在 cleanupDeps 方法中
*/
if (!this.depIds.has(id)) {
/**
* 添加 watcher 自己到 dep
*/
// 将 watcher 自己放到 dep 中，来了一个双向收集
dep.addSub(this)
}
}
}
/**
* Clean up for dependency collection.
* 清理依赖项收集
*/
cleanupDeps () {
let i = this.deps.length
while (i--) {
const dep = this.deps[i]
if (!this.newDepIds.has(dep.id)) {
dep.removeSub(this)
}
}
let tmp = this.depIds
this.depIds = this.newDepIds
this.newDepIds = tmp
this.newDepIds.clear()
tmp = this.deps
this.deps = this.newDeps
this.newDeps = tmp
this.newDeps.length = 0
}
/**
* Subscriber interface.
* Will be called when a dependency changes.
* 用户界面
* 当依赖改变时将被调用
*/
/**
* 根据 watcher 配置项，决定接下来怎么走，一般是 queueWatcher
*/
update () {
/* istanbul ignore else */
if (this.lazy) {
// 懒执行时会走这儿，比如 computed
// 将 dirty 置为 true，在组件更新之后，当响应式数据再次被更新时，执行 computed getter
// 重新执行computed回调函数，计算新值，然后缓存到watcher.value
/**
* 懒执行时走这里，比如 computed
* 将 dirty 置为 true，可以让 computedGetter 执行时重新计算 computed 回调函数的执行结果
*/
this.dirty = true
} else if (this.sync) {
// 同步执行时会走这儿
// 比如this.$watch()或者watch选项时，传递一个sync配置，比如{sync:true}
/**
* 同步执行，在使用 vm.$watch 或者 watch 选项时可以传一个 sync 选项
* 当为 true 时在数据更新时该 watcher 就不走异步更新队列，直接执行 this.run
* 方法进行更新
* 这个属性在官方文档中没有出现
*/
this.run()
} else {
/**
* 更新时一般都这里，将 watcher 放入 watcher 队列
*/
// 将当前 watcher 放入 watcher 队列，一般都是走这个分支
queueWatcher(this)
}
}
/**
* Scheduler job interface.
* Will be called by the scheduler.
* 调度器作业接口
* 将被调度程序调用
*/
/**
* 由 刷新队列函数 flushSchedulerQueue 调用，如果是同步 watch，则由 this.update 直接调用，完成如下几件事：
* 1.执行实例化 watcher 传递的第二个参数，updateComponent 或者 获取 this.xx 的一个函数（parsePath 返回的函数）
* 2.更新旧值为新值
* 3.执行实例化 watcher 时传递的第三个参数，比如用户 watcher 的回调函数
*/
run () {
if (this.active) {
/**
* 调用 this.get 方法
*/
// 执行get
const value = this.get()
if (
value !== this.value ||
// Deep watchers and watchers on Object/Arrays should fire even
// when the value is the same, because the value may
// have mutated.
/**
* 深层观察者和对象/数组上的观察者应该开火
* 当值相同时，因为值可能
* 已经发生了变化
*/
isObject(value) ||
this.deep
) {
// set new value
/**
* 更新旧值为新值
*/
const oldValue = this.value
this.value = value
if (this.user) {
// 用户watcher，再执行一下watch回调
// watch(()=>{}, {val, oldVal} => {})
/**
如果是用户 watcher，则执行用户传递的第三个参数 - 回调函数，参数为 val 和 oldVal
try {
this.cb.call(this.vm, value, oldValue)
} catch (e) {
handleError(e, this.vm, `callback for watcher "${this.expression}")
}
*/
const info = `callback for watcher "${this.expression}"`
invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)
} else {
/**
* 渲染 watcher, this.cb = noop，一个空函数
*/
this.cb.call(this.vm, value, oldValue)
}
}
}
}
/**
* Evaluate the value of the watcher.
* This only gets called for lazy watchers.
*/
/**
* 懒执行的 watcher 会调用该方法
* 比如：computed，在获取 vm.computedProperty 的值时会调用该方法
* 然后执行 this.get，即 watcher 的回调函数，得到返回值
* this.dirty 被置为 false，作用是页面在本次渲染中只会一次 computed.key 的回调函数
* 这也就是大家常说的 computed 和 methods 区别之一是 computed 有缓存的原理所在
* 而页面更新后会 this.dirty 会被重新置为 true，这一步是在 this.update 方法中完成的
*/
evaluate () {
this.value = this.get()
this.dirty = false
}
/**
* Depend on all deps collected by this watcher.
* 依赖于这个观察者收集的所有deps。
*/
depend () {
let i = this.deps.length
while (i--) {
this.deps[i].depend()
}
}
/**
* Remove self from all dependencies' subscriber list.
* 从所有依赖的订阅者列表中删除 self
*/
teardown () {
if (this.active) {
// remove self from vm's watcher list
// this is a somewhat expensive operation so we skip it
// if the vm is being destroyed.
/**
* 从 vm 的监视列表中删除 self
* 这是一个有点昂贵的 操作，所以我们跳过它
* 如果虚拟机正在销毁
*/
if (!this.vm._isBeingDestroyed) {
remove(this.vm._watchers, this)
}
let i = this.deps.length
while (i--) {
this.deps[i].removeSub(this)
}
this.active = false
}
}
}