Vue v2.6.11 响应式实现源码解析

let car = {};let val = 3000;Object.defineProperty(car, "price", {  configurabel: true,  enumerable: true,  get() {    console.log("price属性被读取了");    return val;  },  set(newVal) {    console.log("price属性被修改了");    val = newVal  }})

if (Array.isArray(value)) {      if (hasProto) {        protoAugment(value, arrayMethods)      } else {        copyAugment(value, arrayMethods, arrayKeys)      }      this.observeArray(value)    } else {      this.walk(value)    }}

/** * Define a reactive property on an Object. */export function defineReactive (  obj: Object,  key: string,  val: any,  customSetter?: ?Function,  shallow?: boolean) {  // 实例化一个依赖管理器，生成一个依赖管理数组dep  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) {        // 在getter中收集依赖        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)      // 在setter中通知依赖更新      dep.notify()    }  })}

/* @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. */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)  }  removeSub (sub: Watcher) {    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()    }  }}// 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]}

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    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') {      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        )      }    }    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: 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) {          try {            this.cb.call(this.vm, value, oldValue)          } catch (e) {            handleError(e, this.vm, `callback for watcher "${this.expression}"`)          }        } 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    }  }}

data() {  return {    arr: [1,2,3],    user: {},    isLogin: true  }}

let arr = [1,2,3]arr.push(4)Array.prototype.newPush = function(val) {  console.log("arr被修改了")  this.push(val)}arr.newPush(4)

/* * not type checking this file because flow doesn't play well with * dynamically accessing methods on Array prototype */import { def } from '../util/index'const arrayProto = Array.prototype// 创建了一个对象作为拦截器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  const original = arrayProto[method]  def(arrayMethods, method, function mutator (...args) {    const result = original.apply(this, args)    const ob = this.__ob__    let inserted    switch (method) {      case 'push':      case 'unshift':        inserted = args        break      case 'splice':        inserted = args.slice(2)        break    }    if (inserted) ob.observeArray(inserted)    // notify change    ob.dep.notify()    return result  })})

constructor (value: any) {    this.value = value    this.dep = new Dep()    this.vmCount = 0    def(value, '__ob__', this)    if (Array.isArray(value)) {      if (hasProto) {        // value.__proto__= arrayMethods        protoAugment(value, arrayMethods)      } else {        copyAugment(value, arrayMethods, arrayKeys)      }      this.observeArray(value)    } else {      this.walk(value)    }  }

observeArray (items: Array<any>) {    for (let i = 0, l = items.length; i < l; i++) {        observe(items[i])    }}

methodsToPatch.forEach(function (method) {  // cache original method  const original = arrayProto[method]  def(arrayMethods, method, function mutator (...args) {    const result = original.apply(this, args)    const ob = this.__ob__    let inserted    switch (method) {      case 'push':      case 'unshift':        inserted = args        break      case 'splice':        inserted = args.slice(2)        break    }    if (inserted) ob.observeArray(inserted)    // notify change    ob.dep.notify()    return result  })})

let arr = [{  name: 'test',  age,  info: {    address: 'xxx'  }}]

let arr = [1,2,3]arr[0] = 5; // 通过数组下标去修改数组中的数据arr.length = 0; // 通过修改数组长度去清空数组