vue 原理解析（三）：初始化时created之前做了什么

继续this._init() 的初始化相关操作， 接着又会执行如下三个初始化方法：

initInjections(vm)
initState(vm)
initProvide(vm)
callHook(vm, ‘created’): 

1、initInjections(vm)、initProvide(vm)

inject 和 provide ，这是[email protected] 版本添加的一对需要一起使用的API,
它允许父级组件向它之后的子孙组件提供依赖，让子孙组件无论嵌套多深都可以访问到.

• provide : 提供一个对象或是返回一个对象的函数。
• inject : 是一个字符串数组或对象。

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

// app.vue 父组件

export default {
  provide() {
    return {
      app: this
    }
  },
  data() {
    return {
      info: 'hello world!'
    }
  }
}

// child.vue 子孙后代组件

export default {
  inject: ['app'],
  methods: {
    handleClick() {
      this.app.info = 'hello vue!'
    }
  }
}

2、initState(vm)

初始化会被使用到的状态， 状态包括props、data、methods、 computed、watch五个选项
先看下 initState(vm) 方法的定义：

export function initState(vm) {
  ...
  const opts = vm.$options
  if(opts.props) initProps(vm, opts.props)
  if(opts.methods) initMethods(vm, opts.methods)
  if(opts.data) initData(vm)
  ...
  if(opts.computed) initComputed(vm, opts.computed)
  if(opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

3、callHook(vm, ‘created’)

执行用户定义的created 钩子函数

总结

• initInjections(vm): 让子组件inject的项可以访问到正确的值。
• initState(vm): 将组件定义的状态挂载到this下。
• initProvide (vm): 初始化父组件提供的provide依赖。
• created： 执行组件的 created 钩子函数。

参考链接：https://blog.csdn.net/chenzhizhuo/article/details/101157297