Vue源码学习---生命周期图示注释

这篇文章在于总结前段时间对于Vue源码的粗略学习，大致讲述一个简单的vue实例从创建到更新再到销毁的过程。涉及Vue从html结构到ast对象；再从render函数到virtual dom；以及vue的核心Observer + dep + Watcher对象所构成的数据驱动视图更新的逻辑；以及最后更新页面所涉及的diff算法等等。Vue博大精深，小子由衷敬畏和仰慕。能力有限，各方面均是个人肤浅认知。记录一些个人学习理解心得，有不当的地方请指正。【生命周期图注释–占位，后面补上】Vue的Observer + dep + watcherObserverObserver在创建的时候，给传入的对象进行封装，返回一个包含value,dep(from new Dep()),ob__等属性的Ob实例。Ob对象对传入的value进行深层次的改造，给value以及属性中是对象或者数组的项进行改造，使他们可以被观测。对象执行defineReactive（下文解析）；数组改写部分原型方法，使他们可以被观测。export class Observer { value: any; dep: Dep; vmCount: number; // number of vms that have this object as root $data constructor (value: any) { this.value = value this.dep = new Dep() this.vmCount = 0 // 定义不可枚举的属性__ob def(value, ‘ob’, this) // 给data添加__ob__属性，返回observer对象 // root value是个对象，这个if针对属性值 if (Array.isArray(value)) { // 原型链绑定到改造后的一些方法，是对象操作可被观测 if (hasProto) { protoAugment(value, arrayMethods) } else { copyAugment(value, arrayMethods, arrayKeys) } this.observeArray(value) } else { this.walk(value) } } /** * Walk through all properties and convert them into * getter/setters. This method should only be called when * value type is Object. / 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]) } }}通过Object.defineProperty在被观测对象的读取和写入过程中执行一些操作，用来触发视图更新。关键步骤有三点：1.给每一个被观测的属性或者对象利用闭包创建一个Dep对象供get或者set函数使用。2.存在观测对象的前提下（vm的render，update过程，以及compute，watch过程等等，在读取属性值的时候，执行dep.depend(大致作用就是将当前target的watcher对象存入dep.subs);3.存在观测对象的前提下,在写入属性值的时候，执行dep.notify(),这个方法的大致作用是在被观测对象发生变化时，取出保存在dep.subs里面的watcher对象，执行这些对象的update方法，去更新依赖。这个地方存在一个个人觉得很优秀的设计，就是视图的更新是调用nextTick函数并且队列更新视图。传送门–Vue异步更新队列大致作用就是异步队列更新视图，达到性能以及效率上的提升。defineReactive/* * Define a reactive property on an Object. /export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean) { const dep = new Dep() const property = Object.getOwnPropertyDescriptor(obj, key) if (property && property.configurable === false) { return } // cater for pre-defined getter/setters const getter = property && property.get const setter = property && property.set if ((!getter || setter) && arguments.length === 2) { val = obj[key] } let childOb = !shallow && observe(val) // 作为props的子对象不再ob, observe 返回ob对象 Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { dep.depend() if (childOb) { childOb.dep.depend() if (Array.isArray(value)) { dependArray(value) } } } return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val / eslint-disable no-self-compare / 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 if (getter && !setter) return if (setter) { setter.call(obj, newVal) } else { val = newVal } childOb = !shallow && observe(newVal) dep.notify() // 通知更新this.subs.update } })}DepDep对象作为Obverser对象与Watcher对象的中介者，起到关联两个对象，统一把控变化的作用。1.在被观测属性被读取的时候，且是需要被观测的（被观测对象的操作，后文如无特殊说明，都在这个前提下,首先检测当前的watcher对象是否在已经在当前dep对象的subs里面，不在则添加。2.notify，是在写入观测者对象之后，触发视图更新的操作。3.Dep.target,所有dep对象公用一个target。保证同一时间只有一个目标对象在被计算。export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) // Watcher } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { // target 为Watcher对象 Dep.target.addDep(this) // this当前观测者持有的dep对象 } } 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) } for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() // watcher.update } }}// The current target watcher being evaluated.// This is globally unique because only one watcher// can be evaluated at a time.Dep.target = nullconst targetStack = []export function pushTarget (target: ?Watcher) { targetStack.push(target) Dep.target = target}export function popTarget () { targetStack.pop() Dep.target = targetStack[targetStack.length - 1]}WathceraddDep函数：addDep的作用是，保证在向dep对象添加wathcer的时候，一个depid在一轮观测中只被添加一次。这个管控过程，在watcher里面使用set对象维护。update函数：用来队列触发视图更新/* * 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. /export default class Watcher { // 代码过长，只展文中提到的部分 addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { dep.addSub(this) // this = > Watcher } } } /* * Subscriber interface. * Will be called when a dependency changes. / update () { / istanbul ignore else */ if (this.lazy) { this.dirty = true } else if (this.sync) { this.run() } else { queueWatcher(this) } }}