vue初始化状态

具体生命周期

初始化props

事实上，vue中所有组件都是vue.js实例，组件在进行模板解析时，会将标签上的属性解析成数据，最终生成渲染函数。而渲染函数被执行时，会生成真实的DOM节点并渲染到视图中。但是如果某个节点是组件节点，那么在虚拟Dom渲染的过程中会将子组件实例化，这会将模板解析时从标签属性上解析出的数据当作参数传递给子组件，其中包含了props数据。

规格化props为对象的格式

function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  if (Array.isArray(props)) {
    i = props.length
    while (i--) {
      val = props[i]
      if (typeof val === 'string') {
        name = camelize(val)
        res[name] = { type: null }
      } else if (process.env.NODE_ENV !== 'production') {
        warn('props must be strings when using array syntax.')
      }
    }
  } else if (isPlainObject(props)) {
    for (const key in props) {
      val = props[key]
      name = camelize(key)
      res[name] = isPlainObject(val)
        ? val
        : { type: val }
    }
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
      `but got ${toRawType(props)}.`,
      vm
    )
  }
  options.props = res
}

TIP

先检查props是否为一个数组。如果不是则调用isPlainObject函数检查是否为对象类型。如果是数组那么通过while语句循环数组中的每一项，判断props名称的类型是否为String类型：如果是则调用camlize函数将props名称驼峰化。

初始化computed

简单说computed是定义在vm上的一个特殊的getter方法。之所以说特殊，是因为在vm上定义getter方法，get并不是用户提供的函数，而是vue内部的一个代理函数。在代理函数中可以结合Watcher实现缓存和收集依赖等功能

如何指导计算属性的返回值是否发生变化？这其实结合Watcher的dirty属性来分辨的：当dirty属性为true时，说明需要重新计算“计算属性”的返回值；当dirty属性为false时，说明计算属性的值并没有变，不需要重新计算。当计算属性的中的内容发生变化后，计算属性的Watcher和组件的Watcher都会得到通知。计算属性的Watcher会将自己的dirty属性设置为true，当下次读取计算属性时，就会重新计算一次值。然后组件的Watcher也会得到通知，从而执行render函数进行重新渲染的操作。