解析vue响应式原理1

import Dep from ‘./dep’
import VNode from ‘…/vdom/vnode’
import { arrayMethods } from ‘./array’
import {
def,
warn,
hasOwn,
hasProto,
isObject,
isPlainObject,
isPrimitive,
isUndef,
isValidArrayIndex,
isServerRendering
} from ‘…/util/index’

const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

/**

• In some cases we may want to disable observation inside a component’s
• update computation.
  */
  export let shouldObserve: boolean = true

export function toggleObserving (value: boolean) {
shouldObserve = value
}

/**

• Observer class that is attached to each observed
• object. Once attached, the observer converts the target
• object’s property keys into getter/setters that
• collect dependencies and dispatch updates.
  */
  export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

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

/**

• Walk through all properties and convert them into
• getter/setters. This method should only be called when
• value type is Object.
  */
  walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
  defineReactive(obj, keys[i])
  }
  }

/**

• Observe a list of Array items.
  */
  observeArray (items: Array) {
  for (let i = 0, l = items.length; i < l; i++) {
  observe(items[i])
  }
  }
  }

// helpers

/**

• Augment a target Object or Array by intercepting
• the prototype chain using proto
  /
  function protoAugment (target, src: Object) {
  / eslint-disable no-proto /
  target.proto = src
  / eslint-enable no-proto */
  }

/**

• Augment a target Object or Array by defining
• hidden properties.
  /
  / istanbul ignore next */
  function copyAugment (target: Object, src: Object, keys: Array) {
  for (let i = 0, l = keys.length; i < l; i++) {
  const key = keys[i]
  def(target, key, src[key])
  }
  }

/**

• Attempt to create an observer instance for a value,
• returns the new observer if successfully observed,
• or the existing observer if the value already has one.
  */
  export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
  return
  }
  let ob: Observer | void
  if (hasOwn(value, ‘ob’) && value.ob instanceof Observer) {
  ob = value.ob
  } else if (
  shouldObserve &&
  !isServerRendering() &&
  (Array.isArray(value) || isPlainObject(value)) &&
  Object.isExtensible(value) &&
  !value._isVue
  ) {
  ob = new Observer(value)
  }
  if (asRootData && ob) {
  ob.vmCount++
  }
  return ob
  }

/**

• Define a reactive property on an Object.
  */
  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
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()
}
})
}

/**

• Set a property on an object. Adds the new property and
• triggers change notification if the property doesn’t
• already exist.
  */
  export function set (target: Array | 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
  }
  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
  }

/**

• Delete a property and trigger change if necessary.
  */
  export function del (target: Array | Object, key: any) {
  if (process.env.NODE_ENV !== ‘production’ &&
  (isUndef(target) || isPrimitive(target))
  ) {
  warn(Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)})
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.splice(key, 1)
  return
  }
  const ob = (target: any).ob
  if (target._isVue || (ob && ob.vmCount)) {
  process.env.NODE_ENV !== ‘production’ && warn(
  'Avoid deleting properties on a Vue instance or its root $data ’ +
  ‘- just set it to null.’
  )
  return
  }
  if (!hasOwn(target, key)) {
  return
  }
  delete target[key]
  if (!ob) {
  return
  }
  ob.dep.notify()
  }

/**

• Collect dependencies on array elements when the array is touched, since
• we cannot intercept array element access like property getters.
  */
  function dependArray (value: Array) {
  for (let e, i = 0, l = value.length; i < l; i++) {
  e = value[i]
  e && e.ob && e.ob.dep.depend()
  if (Array.isArray(e)) {
  dependArray(e)
  }
  }
  }
  深圳网站建设www.sz886.com