Vue2源码解析-源码调试与核心流程梳理图解

<div id="app">   <p>{{fullName}}:{{fullName}}-{{formBY}}</p> </div>  const vm = new Vue({     el: "#app",     data() {         return {             firstName: "Shiina",             lastName: "Mashiro",             formBY: "flytree-cnblogs",             arr: [1, 2, 3, ["a"]],         };     },     computed: {         fullName() {             return this.firstName + this.lastName;         }     },     watch: {         firstName(newValue, oldValue) {             console.log(newValue, oldValue)         }     } });  setTimeout(() => {     vm.firstName = 'flytree' }, 1000); 

// 路径 /scr/core/observer/index.js export function defineReactive() {     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)     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()         }     }) } 

export default class Dep {   constructor () {     this.id = uid++     this.subs = []   }    addSub (sub) {     this.subs.push(sub)   }    removeSub (sub) {     remove(this.subs, sub)   }    depend () {     if (Dep.target) {       Dep.target.addDep(this)     }   }    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()     }   } } 

export default class Watcher {     constructor(vm, expOrFn, cb, options, isRenderWatcher) {         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         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         if (typeof expOrFn === 'function') {             // 渲染watcher时就gettr就传入了 _update(_render())             this.getter = expOrFn         } else {             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                 )             }         }         // 在计算属性创建watcher的时候lazy为true         this.value = this.lazy             ? undefined             : this.get()     }      /**      * Evaluate the getter, and re-collect dependencies.      */     get() {         pushTarget(this)         let value         const vm = this.vm         try {             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             if (this.deep) {                 traverse(value)             }             popTarget()             this.cleanupDeps()         }         return value     }      /**      * Add a dependency to this directive.      */     addDep(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)             }         }     }      /**      * 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.      */     update() {         /* istanbul ignore else */         if (this.lazy) {             this.dirty = true         } else if (this.sync) {             this.run()         } else {             queueWatcher(this)         }     }      /**      * Scheduler job interface.      * Will be called by the scheduler.      */     run() {         if (this.active) {             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) {                     const info = `callback for watcher "${this.expression}"`                     invokeWithErrorHandling(this.cb, this.vm, [value, oldValue], this.vm, info)                 } else {                     this.cb.call(this.vm, value, oldValue)                 }             }         }     }      /**      * Evaluate the value of the watcher.      * This only gets called for lazy watchers.      */     evaluate() {         this.value = this.get()         this.dirty = false     }      /**      * Depend on all deps collected by this watcher.      */     depend() {         let i = this.deps.length         while (i--) {             this.deps[i].depend()         }     }      /**      * Remove self from all dependencies' subscriber list.      */     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.             if (!this.vm._isBeingDestroyed) {                 remove(this.vm._watchers, this)             }             let i = this.deps.length             while (i--) {                 this.deps[i].removeSub(this)             }             this.active = false         }     } } 

export function lifecycleMixin (Vue) {   Vue.prototype._update = function (vnode, hydrating) {     const vm = this     const prevEl = vm.$el     const prevVnode = vm._vnode     const restoreActiveInstance = setActiveInstance(vm)     vm._vnode = vnode     // Vue.prototype.__patch__ is injected in entry points     // based on the rendering backend used.     if (!prevVnode) {       // initial render       vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)     } else {       // updates       vm.$el = vm.__patch__(prevVnode, vnode)     }     restoreActiveInstance()     // update __vue__ reference     if (prevEl) {       prevEl.__vue__ = null     }     if (vm.$el) {       vm.$el.__vue__ = vm     }     // if parent is an HOC, update its $el as well     if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {       vm.$parent.$el = vm.$el     }     // updated hook is called by the scheduler to ensure that children are     // updated in a parent's updated hook.   } }