3-2-07-Vue.js 源码阅读-初始化过程-实例成员-initState

Vue 初始化的过程-实例成员-initState

这个方法中将实例中的 $options 中的 props、methods、data、computed、watch 通过对应的 init 方法进行初始化。

initProps(vm, opts.props)

在这个方法中通过遍历 opts.props 将所有的 prop 通过 defineReactive 将属性转换成 getter/setter 并注入到 vm._props 中，所有的成员最终都会存储在 _props 这个属性中。

如果是在开发模式中去给 prop 赋值会报警告，如果是生产模式，则直接通过 defuneReactive 注入。

遍历的过程中还需要判断当前属性是否在 vm 实例中存在，如果不存在，通过 proxy 这个函数把属性注入到实例中，在 proxy 中会调用 Object.defineProperty 将属性注入到 vue 实例中，目的就是为了在将来使用的时候更加方便。

initProps 的作用就是将 props 中的成员转换成响应是数据并注入到 vue 实例中

initMethods(vm, opts.methods)

在这个方法中首先需要先遍历 methods 这个属性，并对其进行分类讨论，

• 如果是在开发模式下
• 判断是否是一个 function 如果不是发出警告
• 然后判断 method 是否在 props 中已经存在，如果存在发出警告，因为最终 props 和 methods 都会注入到 vue 实例中，所以不能有同名的属性。
• 然后判断 key 是否在 vm 中存在，并且是不是以 _ 或 $ 开头，如果存在或者是以 _ 或 $ 开头，发出警告。（所有以 _ 开头的成员都是静态成员，以 $ 开头的成员都是 vue 提供的成员，所以不建议以 _ 或 $ 开头）。
  最后，把 method 注入到 vm 上，注入之前判断是否是一个 function ,如果不是 noop ，如果是注入。

initMethods的作用是把选项中的 methods 注入到 Vue 实例中，在注入之前会先判断命名是否在 props 中有重名的属性

initData(vm, opts.data)

首先判断是否传入了 data 属性，如果没有，初始化一个空对象并通过调用 observer 这个函数将这个对象转换成响应式的对象，如果有，调用 initData 。

在这个方法中，首先，判断 data 是否是一个 function ，如果是（组件中的 data），调用这个 function 获取它的返回值。然后对数据进行处理

• 判断 data 中的成员是否和 methods 和 props 中的成员重名，如果有，发出警告（在 development 下）。
• 判断是否以 _ 或 $ 开头，如果是不会注入，否则调用 proxy 将属性注入到 vm 中。

在这个方法中，会将 data 中的成员转换成响应式数据，并且注入到 vm 中。