Vue源码阅读之8状态初始化

进入create状态的第二个过程就是状态的初始化，状态的初始化是对于Vue对象的Props,Methods,Data,watch,computed进行初始化经过这里Vue的一些关键的属性才被初始化可以去使用。

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

首先是为组件对象创建监听属性_watchers并初始化为空数组。

获取传入组件的参数并分别获取其各部分的数据。

props属性初始化

如果传入的数据具有props属性则对props属性进行初始化，props属性的初始化过程是获取传入的所有的props属性名，生成此属性名的合法属性名。然后调用defineReactive函数为此属性设置getter和setter函数监视参数的变化。对于这个属性组件中没有调用proxy函数设置此组件的此属性的getter和setter函数。

methods属性初始化

如果传入的值具有methods属性则对组件的methods属性进行初始化，遍历methods属性中的属性名，如果methods属性中的属性名对应的属性值为null将会进行警告，如果此属性名在props属性中也存在 也将会警告，如果此属性名是预留属性也将会进行报错，最后将此属性的定义在组件上。

data属性初始化

如果传入的值具有data属性则对组件的data属性进行初始化，如果data的类型为函数设置data的值为调用函数后返回的值，如果是其他类型直接使用此data值。如果data的数据类型不是对象类型则会设置data为空的对象并进行警告。遍历data中的所有的属性，如果这些属性存在于props中methods中进行警告，如果属性不在预留属性中，将此属性添加到组件的_data属性中进行代理。调用observe函数观察data数据的变化。如果没有data属性也会创建一个空的data属性对象并观察data数据的变化。

computed属性初始化

如果传入的数据具有computed属性，首先创建一个空的监听数组并判断是否是服务器端进行渲染，遍历computeds属性中的所有属性，并获取其处理函数，如果不是服务器端渲染则为这个属性创建监听器对象，如果这个属性不存在于组件对象中调用defineComputed函数为此组件的此函数定义getter和setter属性，对于不是发布模式对于此属性也存在于data或者是props属性中进行警告。

watch属性初始化

如果传入的数据具有watch属性，遍历watch属性中的所有的属性，并获取此属性的处理函数，如果是数组对于数组的每一个参数调用createWatcher函数在组件中添加此属性，如果是不是数组调用createWatcher函数在组件中添加此属性。

 经过上面的叙述我们可以看到组件相关的一些用户定义的属性的初始化过程，经过这个过程其中的属性变量才可以进行使用。但是我们可以看到methods属性中的值可能会覆盖props属性，data属性可能会覆盖props和methods属性，computed属性可能会覆盖data和props和methods属性。当我们创建这些属性的时候最好不要属性名相同他们会出现属性的覆盖现象。