详细分析vue响应式原理

// 源码位置：/src/core/observer/index.js
class Observe {
 constructor(data) {
  this.dep = new Dep()
  // 1
  def(data, '__ob__', this)
  if (Array.isArray(data)) {
   // 2
   protoAugment(data, arrayMethods)
   // 3
   this.observeArray(data)
  } else {
   // 4
   this.walk(data)
  }
 }
 walk(data) {
  Object.keys(data).forEach(key => {
   defineReactive(data, key, data[key])
  })
 }
 observeArray(data) {
  data.forEach(item => {
   observe(item)
  })
 }
}

// 源码位置：/src/core/observer/dep.js
let id = 0
class Dep{
 constructor() {
  this.id = ++id // dep 唯一标识
  this.subs = [] // 存储 Watcher
 }
 // 1
 depend() {
  Dep.target.addDep(this)
 }
 // 2
 addSub(watcher) {
  this.subs.push(watcher)
 }
 // 3
 notify() {
  this.subs.forEach(watcher => watcher.update())
 }
}

// 4
Dep.target = null

export function pushTarget(watcher) {
 Dep.target = watcher
} 

export function popTarget(){
 Dep.target = null
}

export default Dep

// 源码位置：/src/core/observer/watcher.js
let id = 0
export class Watcher {
 constructor(vm, exprOrFn, cb, options){
  this.id = ++id // watcher 唯一标识
  this.vm = vm
  this.cb = cb
  this.options = options
  // 1
  this.getter = exprOrFn
  this.deps = []
  this.depIds = new Set()

  this.get()
 }
 run() {
  this.get()
 }
 get() {
  pushTarget(this)
  this.getter()
  popTarget(this)
 }
 // 2
 addDep(dep) {
  // 防止重复添加 dep
  if (!this.depIds.has(dep.id)) {
   this.depIds.add(dep.id)
   this.deps.push(dep)
   dep.addSub(this)
  }
 }
 // 3
 update() {
  queueWatcher(this)
 }
}

// 源码位置：/src/core/observer/index.js
export function observe(data) {
 // 1
 if (!isObject(data)) {
  return
 }
 let ob;
 // 2
 if (data.hasOwnProperty('__ob__') && data.__ob__ instanceof Observe) {
  ob = data.__ob__
 } else {
  // 3
  ob = new Observe(data)
 }
 return ob
}

walk(data) {
 Object.keys(data).forEach(key => {
  defineReactive(data, key, data[key])
 })
}

function defineReactive(obj, key, value) {
 // 1
 let childOb = observe(value)
 // 2
 const dep = new Dep()
 Object.defineProperty(obj, key, {
  get() {
   if (Dep.target) {
    // 3
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
    }
   }
   return value
  },
  set(newVal) {
   if (newVal === value) {
    return
   }
   value = newVal
   // 4
   childOb = observe(newVal)
   // 5
   dep.notify()
   return value
  }
 })
}

observeArray(data) {
 data.forEach(item => {
  observe(item)
 })
}

export default {
  data() {
    return {
      list: [
        {id: 1, name: 'Jack'},
        {id: 2, name: 'Mike'}
      ]
    }
  },
  cretaed() {
    // 如果想要修改 name 的值，一般是这样使用
    this.list[0].name = 'JOJO'
    // 而不是以下这样
    // this.list[0] = {id:1, name: 'JOJO'}
    // 当然你可以这样更新
    // this.$set(this.list, '0', {id:1, name: 'JOJO'})
  }
}

if (Array.isArray(data)) {
 protoAugment(data, arrayMethods)
 // 观察数组
 this.observeArray(data)
} else {
 // 观察对象
 this.walk(data)
}

function protoAugment(data, arrayMethods) {
 data.__proto__ = arrayMethods
}

// 源码位置：/src/core/observer/array.js
// 1
let arrayProto = Array.prototype
// 2
export let arrayMethods = Object.create(arrayProto)

let methods = [
 'push',
 'pop',
 'shift',
 'unshift',
 'reverse',
 'sort',
 'splice'
]

methods.forEach(method => {
 arrayMethods[method] = function(...args) {
  // 3
  let res = arrayProto[method].apply(this, args)
  let ob = this.__ob__
  let inserted = ''
  switch(method){
   case 'push':
   case 'unshift':
    inserted = args
    break;
   case 'splice':
    inserted = args.slice(2)
    break;
  }
  // 4
  inserted && ob.observeArray(inserted)
  // 5
  ob.dep.notify()
  return res
 }
})

// data 数据
let data = {
  name: 'joe'
}

// 渲染watcher
let watcher = {
  run() {
    dep.tagret = watcher
    document.write(data.name)
  }
}

// dep
let dep = [] // 存储依赖 
dep.tagret = null // 记录 watcher

// 数据劫持
Object.defineProperty(data, 'name', {
  get(){
    // 收集依赖
    dep.push(dep.tagret)
  },
  set(newVal){
    data.name = newVal
    dep.forEach(watcher => {
      watcher.run()
    })
  }
})

function defineReactive(obj, key, value) {
 let childOb = observe(value)
 const dep = new Dep()
 Object.defineProperty(obj, key, {
  get() {
   if (Dep.target) {
    dep.depend() // 收集依赖
    if (childOb) {
     childOb.dep.depend()
    }
   }
   return value
  },
  set(newVal) {
   if (newVal === value) {
    return
   }
   value = newVal
   childOb = observe(newVal)
   dep.notify()
   return value
  }
 })
}

export class Watcher {
 constructor(vm, exprOrFn, cb, options){
  this.getter = exprOrFn
  this.get()
 }
 get() {
  pushTarget(this)
  this.getter()
  popTarget(this)
 }
}

class Dep{
 constructor() {
  this.id = id++
  this.subs = []
 }
 depend() {
  Dep.target.addDep(this)
 }
}

export class Watcher {
 constructor(vm, exprOrFn, cb, options){
  this.deps = []
  this.depIds = new Set()
 }
 addDep(dep) {
  if (!this.depIds.has(dep.id)) {
   this.depIds.add(dep.id)
   this.deps.push(dep)
   dep.addSub(this)
  }
 }
}

class Dep{
 constructor() {
  this.id = id++
  this.subs = []
 }
 addSub(watcher) {
  this.subs.push(watcher)
 }
}

methods.forEach(method => {
 arrayMethods[method] = function(...args) {
  let res = arrayProto[method].apply(this, args)
  let ob = this.__ob__
  let inserted = ''
  switch(method){
   case 'push':
   case 'unshift':
    inserted = args
    break;
   case 'splice':
    inserted = args.slice(2)
    break;
  }
  // 对新增的值观测
  inserted && ob.observeArray(inserted)
  // 更新视图
  ob.dep.notify()
  return res
 }
})

function defineReactive(obj, key, value) {
 // 1
 let childOb = observe(value)
 const dep = new Dep()
 Object.defineProperty(obj, key, {
  get() {
   if (Dep.target) {
    dep.depend()
    // 2
    if (childOb) {
     childOb.dep.depend()
    }
   }
   return value
  },
  set(newVal) {
   if (newVal === value) {
    return
   }
   value = newVal
   childOb = observe(newVal)
   dep.notify()
   return value
  }
 })
}

// 源码位置：/src/core/instance/index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
 this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

// 源码位置：/src/core/instance/init.js
export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  // merge options
  if (options && options._isComponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
   // mergeOptions 对 mixin 选项和传入的 options 选项进行合并
   // 这里的 $options 可以理解为 new Vue 时传入的对象
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   )
  }

  // expose real self
  vm._self = vm
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  // 初始化数据
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')

  if (vm.$options.el) {
   // 初始化渲染页面 挂载组件
   vm.$mount(vm.$options.el)
  }
 }
}

// 源码位置：/src/core/instance/state.js 
export function initState (vm: Component) {
 vm._watchers = []
 const opts = vm.$options
 if (opts.props) initProps(vm, opts.props)
 if (opts.methods) initMethods(vm, opts.methods)
 if (opts.data) {
  // data 初始化
  initData(vm)
 } else {
  observe(vm._data = {}, true /* asRootData */)
 }
 if (opts.computed) initComputed(vm, opts.computed)
 if (opts.watch && opts.watch !== nativeWatch) {
  initWatch(vm, opts.watch)
 }
}

function initData (vm: Component) {
 let data = vm.$options.data
 // data 为函数时，执行 data 函数，取出返回值
 data = vm._data = typeof data === 'function'
  ? getData(data, vm)
  : data || {}
 // proxy data on instance
 const keys = Object.keys(data)
 const props = vm.$options.props
 const methods = vm.$options.methods
 let i = keys.length
 while (i--) {
  const key = keys[i]
  if (props && hasOwn(props, key)) {
   process.env.NODE_ENV !== 'production' && warn(
    `The data property "${key}" is already declared as a prop. ` +
    `Use prop default value instead.`,
    vm
   )
  } else if (!isReserved(key)) {
   proxy(vm, `_data`, key)
  }
 }
 // observe data
 // 这里就开始走观测数据的逻辑了
 observe(data, true /* asRootData */)
}

// 源码位置：/src/platforms/web/runtime/index.js 
Vue.prototype.$mount = function (
 el?: string | Element,
 hydrating?: boolean
): Component {
 el = el && inBrowser ? query(el) : undefined
 return mountComponent(this, el, hydrating)
}

// 源码位置：/src/core/instance/lifecycle.js
export function mountComponent (
 vm: Component,
 el: ?Element,
 hydrating?: boolean
): Component {
 vm.$el = el
 callHook(vm, 'beforeMount')

 let updateComponent
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
  updateComponent = () => {
   const name = vm._name
   const id = vm._uid
   const startTag = `vue-perf-start:${id}`
   const endTag = `vue-perf-end:${id}`

   mark(startTag)
   const vnode = vm._render()
   mark(endTag)
   measure(`vue ${name} render`, startTag, endTag)

   mark(startTag)
   vm._update(vnode, hydrating)
   mark(endTag)
   measure(`vue ${name} patch`, startTag, endTag)
  }
 } else {
  // 数据改变时 会调用此方法
  updateComponent = () => {
   // vm._render() 返回 vnode，这里面会就对 data 数据进行取值
   // vm._update 将 vnode 转为真实dom，渲染到页面上
   vm._update(vm._render(), hydrating)
  }
 }
 
 // 执行 Watcher，这个就是上面所说的渲染wacther 
 new Watcher(vm, updateComponent, noop, {
  before () {
   if (vm._isMounted && !vm._isDestroyed) {
    callHook(vm, 'beforeUpdate')
   }
  }
 }, true /* isRenderWatcher */)
 hydrating = false

 // manually mounted instance, call mounted on self
 // mounted is called for render-created child components in its inserted hook
 if (vm.$vnode == null) {
  vm._isMounted = true
  callHook(vm, 'mounted')
 }
 return vm
}

// 源码位置：/src/core/observer/watcher.js 
let uid = 0

export default class Watcher {
 constructor(vm, exprOrFn, cb, options){
  this.id = ++id
  this.vm = vm
  this.cb = cb
  this.options = options
  // exprOrFn 就是上面传入的 updateComponent
  this.getter = exprOrFn

  this.deps = []
  this.depIds = new Set()

  this.get()
 }
 get() {
  // 1. pushTarget 将当前 watcher 记录到 Dep.target，Dep.target 是全局唯一的
  pushTarget(this)
  let value
  const vm = this.vm
  try {
  // 2. 调用 this.getter 相当于会执行 vm._render 函数，对实例上的属性取值，
  //由此触发 Object.defineProperty 的 get 方法，在 get 方法内进行依赖收集（dep.depend），这里依赖收集就需要用到 Dep.target
   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)
   }
   // 3. popTarget 将 Dep.target 置空
   popTarget()
   this.cleanupDeps()
  }
  return value
 }
}

// 源码位置：/src/core/observer/dep.js 
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++) {
   // 执行 watcher 的 update 方法
   subs[i].update()
  }
 }
}

// 源码位置：/src/core/observer/watcher.js 
/**
 * 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)
 }
}

// 源码位置：/src/core/observer/scheduler.js

// 用于存储 watcher
const queue: Array<Watcher> = []
// 用于 watcher 去重
let has: { [key: number]: ?true } = {}
/**
 * Flush both queues and run the watchers.
 */
function flushSchedulerQueue () {
 let watcher, id

 // 对 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 (index = 0; index < queue.length; index++) {
  watcher = queue[index]
  id = watcher.id
  has[id] = null
  // run方法更新视图
  watcher.run()
 }
}
/**
 * Push a watcher into the watcher queue.
 * Jobs with duplicate IDs will be skipped unless it's
 * pushed when the queue is being flushed.
 */
export function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
  has[id] = true
  // watcher 加入数组
  queue.push(watcher)
  // 异步更新
  nextTick(flushSchedulerQueue)
 }
}

// 源码位置：/src/core/util/next-tick.js

const callbacks = []
let pending = false

function flushCallbacks () {
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 // 遍历回调函数执行
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}

let timerFunc

if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 timerFunc = () => {
  p.then(flushCallbacks)
 }
}

export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 // 将回调函数加入数组
 callbacks.push(() => {
  if (cb) {
   cb.call(ctx)
  }
 })
 if (!pending) {
  pending = true
  // 遍历回调函数执行
  timerFunc()
 }
 // $flow-disable-line
 if (!cb && typeof Promise !== 'undefined') {
  return new Promise(resolve => {
   _resolve = resolve
  })
 }
}