Vue源码学习笔记（七）检测数据变化

2018-10-15

检测变化

在使用Vue的过程中，有时候发现，修改了data中的属性，页面却没有发生变化。

哪些数据变化不能被检测？如何解决？

直接修改数组项，给被观测的对象添加一个新的key的时候，由于对象属性上没有添加setter、getter，不会触发更新

可以使用Vue.set(obj, newKey, value)或Vue.set(array, index, value来触发更新

Vue.set

1
2
3

// src/core/global-api/index
import { set, del } from '../observer/index'
Vue.set = set

// src/core/observer/index.js
export function set (target: Array<any> | Object, key: any, val: any): any {
  // 参数检测
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  // 对象，已存在直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 否则拿到ob属性
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  // 把传入的对象也变成响应式
  defineReactive(ob.value, key, val)
  // 触发通知
  ob.dep.notify()
  return val
}

为什么对于数组的处理，调用splice方法，就可以触发到数组项的更新？
是因为在创建响应式对象的时候，Vue对数组原型做了一些处理，重写了部分原型上的方法

// src/core/observer/index.js
class Observer {
	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)
    }
  }
}
// 支持原型属性，将数组的__proto__属性改为自定义的arrayMethods
function protoAugment (target, src: Object, keys: any) {
  /* eslint-disable no-proto */
  target.__proto__ = src
  /* eslint-enable no-proto */
}

1 2	// src/core/observer/array.js // 重写了修改可以修改数组的方法，并且在调用之后在调用ob.dep.notify()来触发更新

Vue.set 本质上都是手动调用 notify 来触发更新