vue observer 源码学习

// index.js
import { arrayMethods } from './array'
const arrayKeys = Object.getOwnPropertyNames(arrayMethods)
// array.js
import { def } from '../util/index'
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

let uid = 0
/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 * dep是可观察的,可以有多个指令订阅它
 */
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()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update() // 更新 Watcher 数组中的数据
    }
  }
}

  Dep内部用到了Watcher,而Watcher又来自watcher.js。先说Dep,内部主要对Watcher类型的数组进行增加删除以及更新维护,自己内部没有什么太多复杂的逻辑,主要还是在watcher.js中。接下来列出watcher.js相关代码：

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.
 */
export default class Watcher {
  // 先看构造函数,内部变量不列出来了,太多了
  constructor (vm: Component, expOrFn: string | Function, cb: Function, options?: ?Object, isRenderWatcher?: boolean) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this // 直接在vue 页面里打印 this 可以找到_watcher属性
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep // 这里可能是怕万一 options 对象里没有 deep 等属性,所以用了 !! 来强转成布尔型
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } 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() // es6语法,类似java 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 = function () {}
        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()
  }

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

/**
 * Define a property.
 */
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

 def内部调用了Object.defineProperty(),结合Observer构造函数的传参,可知这里给每个对象定义了一个__ob__属性,在日常开发中,当我们打印输出时经常能看到__ob__。
      接下来进一步判断value是不是数组,如果不是的话调用walk(),当然要确保参数是Object,然后遍历对象的key并且每个调用defineReactive(obj, keys[i], obj[keys[i]])。

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 // 缓存对象属性内的get方法
  const setter = property && property.set // 缓存对象属性内的set方法
  let childOb = !shallow && observe(val)  // observe(val)尝试返回一个 observer实例,如果 !shallow === true 那么 childOb === ob
                                          // 其实也可以理解为, childOb === val.__ob__
  Object.defineProperty(obj, key, {       // 这里开始是真正的核心所在,其实就是重新对象的get、set方法,方便监听
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val // getter 存在的话就调用原生的 get 方法取值,否则用传进来的值
      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()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal) // childOb === newVal.__ob__
      dep.notify() // 内部调用了 watcher.js 里面的 uodate(),内部又调用了 run(),run()里面设置值,其中还用到了watcher队列
    }
  })
}

   响应式更新的重中之重就是首先得监听到对象属性值的改变,vue通过defineReactive()内部重写传入的对象属性中的set以及get方法,其中,js原生的call()也有很大的功劳。

总结

      再一次看vue源码明显比第一次看好多了,但是不断地调用其它方法,理解上还是有一定的难度,这一次阅读源码更多的就是做个笔记,写得并不好,但是留个印象,方便下次再看。