vuejs学习小结(数据处理)

1.API中的数据（data、prop、propData、method、watch）五个初始化入口是在initState模块中：

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) {
    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)
  }
}

接着对props属性中的每个key，进行处理：

 for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    ....
}

validateProp处理一些其他情况之后，开始构造Observe数据：

value = getPropDefaultValue(vm, prop, key)   //对象
// since the default value is a fresh copy,
// make sure to observe it.
const prevShouldObserve = shouldObserve
toggleObserving(true)
observe(value)
toggleObserving(prevShouldObserve) 

observer是一个比较大的递归，设计到Observer构造、walk函数、defineReactive三个函数和Dep类及其对象。

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__  //该对象已经被定义了Observe
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)   //通过对象构造ob
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

new一个VUE对象主要做了两件事：第一个是监听数据：observe(data)，第二个是编译 HTML：nodeToFragement(id)。他们之间的桥梁是通过虚拟节点来完成的。