二、Vue的初始化过程

Vue的初始化过程

从入口文件里面导入的Vue可以看出其构造函数的文件是web/runtime/index.js

web/runtime/index.js

这里的代码都是与平台相关的.注册了全局的组件和指令,注册了$mount

代码结构

导入了一些成员
- 导入了环境判断inBrowser
- 导入平台相关的指令platformDirectives和组件platformComponents
给Vue.config中注册了一些方法，这些方法是与平台相关的特定的通用的方法
通过extend方法注册了与平台相关的全局的指令和组件
- 注册指令
- 注册组件
在Vue的原型对象上注册了一个patch函数
给vue实例增加了一个$mount的方法
与调试相关的代码,不关心
导出Vue

这个文件依然没有找到Vue的构造函数,我们可以看到其 Vue在core/index文件夹中.

core/index.js

在文件core/index.js中,给Vue初始化静态方法,注册与ssr相关的代码,版本

代码结构

导入成员
给Vue的构造函数增加一些静态方法initGlobalAPI(重点看,选中按F12,在静态成员里面有详细描述)
通过Object.defineProperty注册了一些成员,这些都是ssr,与服务端渲染相关的.暂时忽略
Vue的版本
导出Vue

这个文件依然没有找到Vue的构造函数,我们可以看到其 Vue在instance/index.js文件中, 下面的 core/instance/index.js

core/instance/index.js

这里面才是真正的Vue构造函数的定义,创建了Vue的构造函数,设置了Vue实例的成员

代码结构

导入成员
定义Vue构造函数,接收一个参数options
- 判断开发环境下this若不是Vue的实例,说明没有用new Vue去调用构造函数,会报出警告
- 调用 _init() 方法
混入 vm 的 _init()方法, 初始化vm
混入 vm 的 $data/$props/$set/$delete/$watch 方法,这里是初始化Vue实例的一些方法和属性
初始化事件相关方法
初始化声明周期相关的混入方法
混入 render

为什么不用类创建而用构造函数创建Vue? 此处不用 class 的原因是因为方便后续给Vue实例混入实例成员,如果用了class再用原型,很不搭.

里面把每个功能模块拆分的很细,之后我们要看哪个功能模块,直接看对应的模块即可.

笔记总结
四个导出 Vue 的模块
src/platforms/web/entry-runtime-with-compiler.js
主要增加了编译的功能
web 平台相关的入口
重写了平台相关的 $mount() 方法, 让其内部可以编译模板,将template转换成render函数
注册了 Vue.compile() 方法，传递一个 HTML 字符串返回 render 函数
src/platforms/web/runtime/index.js
web 平台相关
注册和平台相关的全局指令：v-model、v-show
注册和平台相关的全局组件： v-transition、v-transition-group
全局方法：
__patch__：把虚拟 DOM 转换成真实 DOM
$mount：挂载方法
src/core/index.js
与平台无关
设置了 Vue 的静态方法，调用了initGlobalAPI(Vue)
src/core/instance/index.js
与平台无关
与实例相关
定义了构造函数，调用了 this._init(options) 方法
给 Vue 中混入了常用的实例成员

初始化之静态成员

重点看initGlobalAPI方法的内部实现,下面的 core/global-api/index.js

core/global-api/index.js

core/global-api/index.js ,给Vue的构造函数初始化静态方法

代码结构

导入成员
定义并导出了一个initGlobalAPI函数
- 初始化Vue.config对象
- Vue.util里面增加了一些方法
- 静态方法set/delete/nextTick的定义
- 静态方法observable,这个方法是让对象变成可响应的,设置响应式数据
- 初始化Vue.options中的一些属性
  - components\directives\filters
  - _base
  - keep-alive
- 初始化了其他的方法
  - 注册插件Vue.use()
  - 混入Vue.mixin()
  - 返回组件构造函数Vue.extend()
  - Vue.directive()\Vue.component()\Vue.filter()

初始化Vue.config对象

// 初始化Vue.config静态成员,定义了config属性的描述符
  const configDef = {}
  // 定义get方法, 获取config
  configDef.get = () => config
  // 如果是开发环境,给config设置值的时候会触发set方法,触发警告不要给Vue.config重新赋值,可以在上面挂载方法
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  // 利用Object.defineProperty定义Vue.config属性
  Object.defineProperty(Vue, 'config', configDef)

Vue.util增加方法

这些方法没有在文档中写,也不建议我们使用,这里不做说明

// exposed util methods.
// NOTE: these are not considered part of the public API - avoid relying on
// them unless you are aware of the risk.
// Vue.util里面增加了一些方法
// 上面给了NOTE:这些方法不能被视作全局API的一部分,除非你已经意识到某些风险,否则不要去依赖他们
// 意思是我们在调用这些方法的时候可能会出现意外,所以要避免去调用这些方法,vue这么做是其内部要进行使用
Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
}

静态方法set/delete/nextTick

分析完响应式再来看

Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick

静态方法Vue.observable

这个方法是让对象变成可响应的,设置响应式数据

// 静态方法observable
Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
}

初始化Vue.options中的属性

// 先设置一个空对象,创建改对象的同时设置原型等于null,说明当前不需要原型,可以提高性能
Vue.options = Object.create(null)
/**
* 引用自 shared/constants.js
* export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]
* 遍历数组的名字加s之后挂载到Vue.options下面,这三个属性对应的值都是一个空对象,它们的作用分别是存储全局的组件\指令和过滤器
* 我们通过Vue.component,Vue.directive,Vue.filter注册的全局组件\指令和过滤器都会存储到Vue.options对应的属性上
*/
ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
})

_base记录当前构造函数

Vue.options._base = Vue

注册全局组件keep-alive

/**
* 注册全局组件keep-alive
* extend
* 在shared/util.js目录下,extend是实现了浅拷贝,第二个参数的成员拷贝给了第一个参数的成员
* export function extend (to: Object, _from: ?Object): Object {
      for (const key in _from) {
        to[key] = _from[key]
      }
      return to
  }

builtInComponents
名字可以看出来这是一个内置组件,在core/components/index.js目录下,导出的组件其实是KeepAlive
所以在还注册了内置组件keep-alive
*/
extend(Vue.options.components, builtInComponents)

定义 Vue.use 静态成员

// 注册 Vue.use() 用来注册插件
initUse(Vue)

这个方法的定义在同级的use.js中

// 定义并导出函数initUse,传入参数是Vue构造函数
export function initUse (Vue: GlobalAPI) {
  // 定义了Vue.use的方法,接收了一个参数plugin(插件,可以是函数也可以是对象)
  Vue.use = function (plugin: Function | Object) {
    // 定义了一个常量,installedPlugins表示已经安装的插件
    // 这个地方的this只是的Vue的构造函数
    // 获取_installedPlugins属性如果有就返回,如果没有就初始化成一个空数组,这个里面记录了安装的插件.
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))

    // 如果注册的插件已经存在,则直接返回,如果没有注册,下面注册插件,注册插件其实就是调用传入的插件
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

  // 这里整体的功能是调用插件的方法并传递相应的参数

    // additional parameters
    // 这里对调用此方法的其余参数做处理
    // use方法可以传一个参数,也可以传多个参数,如果传多个参数,那么第一个是插件,其余的都是调用时候传入的参数
    // toArray方法将arguments转换成数组,后面的1是把第一个参数去掉
    const args = toArray(arguments, 1)

    // 将Vue构造函数插入到参数数组的第一项中
    args.unshift(this)

    // 如果plugin.install有值的话说明plugin是一个对象,直接调用其install方法
    // 文档中说,如果要注册一个插件,其中必须要有一个install方法,这是对插件的要求
    if (typeof plugin.install === 'function') {
      // 使用apply方法改变其内部的this,第一个传plugin是plugin调用的方法,apply方法会将args数组展开,第一个参数是Vue,intall方法要求的第一个参数也是Vue
      plugin.install.apply(plugin, args)
    // 如果是函数那么直接调用这个函数
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }

    // 当注册好插件之后要将插件保存到已安装的插件数组中
    installedPlugins.push(plugin)

    // 返回Vue的构造函数
    return this
  }
}

定义 Vue.mixin 静态成员

// 注册 Vue.mixin() 实现混入
initMixin(Vue)

这个方法的定义在同级的mixin.js中

export function initMixin (Vue: GlobalAPI) {
  // 传入参数
  Vue.mixin = function (mixin: Object) {
    // 这里的this指的是Vue构造函数
    // 把mixin对象的成员拷贝到Vue.options中,所以mixin注册的是全局选项,官网上有文档
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

定义 Vue.extend 静态成员

返回一个组件的构造函数,做自定义组件的话可能会用到

// 注册 Vue.extend() 基于传入的options返回一个组件的构造函数
initExtend(Vue)

这个方法的定义在同级的extend.js中,下面对一些核心代码进行注解

export function initExtend (Vue: GlobalAPI) {
  ...
  /**
   * Class inheritance
   * 参数是选项,对象
   */
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    // Super是this是Vue构造函数
    const Super = this
    const SuperId = Super.cid
    ...

    // 核心代码
    // 创建一个构造函数 VueComponent ,组件对应的构造函数
    const Sub = function VueComponent (options) {
      // 调用_init()初始化
      this._init(options)
    }
    // 改变了构造函数的原型,让其继承自Vue,故所有的组件都继承自Vue
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++

    // 合并 options 选项
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    Sub['super'] = Super

    // 把Super中的成员拷贝到VueComponent构造函数中来
    if (Sub.options.props) {
      initProps(Sub)
    }
    if (Sub.options.computed) {
      initComputed(Sub)
    }

    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use

    // create asset registers, so extended classes
    // can have their private assets too.
    // 注册Vue.component\Vue.filter\Vue.directive方法
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type]
    })
    ...
    // 最后返回组件的构造函数VueComponent
    return Sub
  }
}

定义 Vue.directive 等静态成员

Vue.directive()\Vue.component()\Vue.filter()这三个方法不是一个一个注册的,是一起注册的,因为其参数是一样的.

Vue文档的全局API中,第一个传id,第二个传定义(可以是对象也可以是函数)

// 注册 Vue.directive()\Vue.component()\Vue.filter()
initAssetRegisters(Vue)

这个方法的定义在同级的assets.js中

export function initAssetRegisters (Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   * 没有直接定义而是遍历数组,里面其实就是'component','directive','filter'
   */
  ASSET_TYPES.forEach(type => {
    // 给每个值分别设置一个方法
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      // 没有传定义的话会找到之前options中定义的方法
      // id就是组件名称 or 指令名称
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        ...
        /**
         * 判断类型是否是组件,且定义是否是原始的Object,判断其转换成字符串是不是'[object Object]'
         */
        if (type === 'component' && isPlainObject(definition)) {

          // 如果设置了组件名称name就用name,如果没有就用id作为组件名称
          definition.name = definition.name || id

          // this.options._base就是Vue构造函数
          // Vue.extend()就是把普通对象转换成了VueComponent构造函数
          // 官方文档中也可以直接传一个Vue.extend构造函数,如果第二个参数definition是Vue.extend的构造函数,那么就直接执行return的最后一句话
          definition = this.options._base.extend(definition)
        }

        // 如果是指令,且是函数的话,会把定义赋值给bind和update两个方法
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }

        // 所有的内容处理之后够会直接挂载到this.options下面去,通过这个注册的是全局的组件\指令等
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

初始化之实例成员

(笔记对应上面core/instance/index.js)

core/instance/index.js

这个里面定义了Vue构造函数,还初始化了很多实例成员,下面具体分析

这几个函数的名字有特点,后面都有Mixin,都传入了Vue构造函数,这几个方法类似的作用就是给Vue的原型对象上混入了相应的成员,也就是给Vue的实例上增加了相应的成员.

initMixmin

混入初始化方法 _init()

同级init.js中

// 初始化了Vue实例的成员，并且触发了beforeCreate和created钩子函数，触发$mount渲染整个页面
// 不同的初始化在不同的模块中，结构很清晰，这些代码不需要记住，用到哪些成员回头看即可

export function initMixin (Vue: Class<Component>) {
  // 给 Vue 实例增加 _init()方法
  Vue.prototype._init = function (options?: Object) {
    // 定义一个vm常量指代Vue的实例
    const vm: Component = this
    // 定义uid，唯一标识
    vm._uid = uid++

    // 开发环境下的性能检测，略过
    let startTag, endTag
    ...

    // a flag to avoid this being observed
    // 标识当前实例是Vue实例，之后做响应式数据的时候不对其进行处理
    vm._isVue = true

    // merge options
    // 合并options，这两个相似的是把用户传入的options和构造函数中的options进行合并
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

    /* istanbul ignore else */
    // 渲染时候的代理对象，实际设置成了Vue实例
    // 在渲染过程的时候会看到这个属性的使用
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }

    // expose real self
    vm._self = vm

    // 初始化的函数
    // 初始化和生命周期相关的内容
    // $children/$parent/$root/$refs
    initLifecycle(vm)
    // 初始化当前组件的事件
    initEvents(vm)
    // 初始化render中所使用的h函数，初始化了几个属性$slots/$scopedSlots/_c/$createElement/$attrs/$listeners
    initRender(vm)
    // 触发声明周期的钩子函数beforeCreate
    callHook(vm, 'beforeCreate')
    // initInjections与initProvide是一对，实现依赖注入
    initInjections(vm) // resolve injections before data/props
    // 初始化 vm 的 _props/methods/_data/computed/watch
    initState(vm)
    // initProvide函数中，会把父组件提供的成员存储到_provided里面中
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    // 挂载整个页面
    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

initProxy

渲染时候的代理对象，实际设置成了Vue实例

initProxy = function initProxy (vm) {
    // 首先判断该环境下是否有proxy对象
    // 如果有代理对象就用new Proxy初始化，否则就把_renderProxy设置成Vue实例
    if (hasProxy) {
      // determine which proxy handler to use
      const options = vm.$options
      const handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler
      vm._renderProxy = new Proxy(vm, handlers)
    } else {
      vm._renderProxy = vm
    }
  }

initLifecycle

export function initLifecycle (vm: Component) {
  const options = vm.$options

  // locate first non-abstract parent
  // 找到当前Vue实例的父组件，将其添加到父组件的$children里面去
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  // 挂载$parent\$root\$children\$refs
  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}
  // _开头的都是私有成员
  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

initEvents

export function initEvents (vm: Component) {
  // 给vm添加了属性_events，这个属性是用来存储事件名称以及对应的处理函数，键就是事件名称，值就是事件处理函数
  // 值是数组形式，因为一个事件名称对应多个事件处理函数，发布订阅模式中曾经模拟过这种形式
  // 在下面的$on中可以看到其使用
  // (vm._events[event] || (vm._events[event] = [])).push(fn)
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  // 获取父元素上附加的事件，注册到当前组件中
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

initRender

export function initRender (vm: Component) {
  ...
  // 初始化$slots/$scopedSlots两个去插槽相关的属性
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject

  // 重点方法 _c/$createElement
  // 对手动传入template属性，其编译生成的 render 进行渲染的方法，其调用的也是createElement，最后一个参数不一样
  // 当把template编译成render函数的时候，其内部会调用_c
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)

  // 对手动传入的 render 函数进行渲染的方法
  // $createElement就是new Vue的时候传入render(h)的h函数，所用是把虚拟DOM转换成真实DOM
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  ...
  // 定义$attrs和$listeners属性，用defineReactive是定义响应式数据，这些数据是只读的，开发环境不允许赋值
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

initInjections

// 依赖注入的实现原理
export function initInjections (vm: Component) {
  // 将inject对象的所有属性，判断这些属性如果在vm._provided属性中存在就提取出来放到result
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    // 遍历属性将其注入到Vue实例并设置成响应式数据
    Object.keys(result).forEach(key => {

      /* istanbul ignore else */
      // 生产环境下如果直接给inject环境赋值会发送警告
      if (process.env.NODE_ENV !== 'production') {
        defineReactive(vm, key, result[key], () => {
          warn(
            `Avoid mutating an injected value directly since the changes will be ` +
            `overwritten whenever the provided component re-renders. ` +
            `injection being mutated: "${key}"`,
            vm
          )
        })
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}

其中resolveInject函数的如何实现的?

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {
    ...
    // 核心代码，重点看
    // 先拿到inject里面所有的keys
    const keys = hasSymbol
      ? Reflect.ownKeys(inject)
      : Object.keys(inject)
    // 这些keys是inject中的所有属性，判断keys是否在source._provided里面，source就是vm实例
    for (let i = 0; i < keys.length; i++) {
      ...
      let source = vm
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) {
          // 如果这个属性在source._provided中，就放到result里面
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
      ...
    }
    // 最终返回result
    return result
  }
}

initState

export function initState (vm: Component) {
  vm._watchers = []
  // 获取了实例中的$options
  // 判断props，methods，data，computed，watch这些属性，如果有就用init进行初始化
  const opts = vm.$options
  // initProps：把props数据转换成响应式数据并且注入到Vue实例中
  if (opts.props) initProps(vm, opts.props)
  // initMethods：初始化了选项中的methods，在注入之前判断了方法名称和值
  if (opts.methods) initMethods(vm, opts.methods)
  // 如果参数中有data就执行initData
  // 如果参数中没有data就在vm初始化一个_data并赋值一个空对象，并且进行响应式处理
  if (opts.data) {
    //initData：初始化选项中的data，注入到Vue实例中，注入之前进行重名判断.并且将data进行响应式处理
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化计算属性和侦听器，注入到Vue实例中
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

initProps

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  // 定义了一个_props对象并存到props常量中
  const props = vm._props = {}
  const keys = vm.$options._propKeys = []
  ...
  // 遍历propsOptions(vm.$options.props)的所有属性，将属性都通过defineReactive转换成 get\set 注入到props(vm._props)里面
  // 所有的成员都会再_props里面存储
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      ...
    } else {
      defineReactive(props, key, value)
    }

    // vm.$options.props判断是否在Vue实例中存在，如果不存在通过proxy方法把属性注入到Vue实例中
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

initMethods

function initMethods (vm: Component, methods: Object) {
  // 获取选项中的$options.props，这里为什么要获取props是为了下面名称重复排查需要
  const props = vm.$options.props

  // 遍历methods中的所有属性(方法名称)
  for (const key in methods) {
    if (process.env.NODE_ENV !== 'production') {
      // 如果是开发环境判断methods值是否是function，如果不是function就会发送警告
      if (typeof methods[key] !== 'function') {
        warn(
          `Method "${key}" has type "${typeof methods[key]}" in the component definition. ` +
          `Did you reference the function correctly?`,
          vm
        )
      }

      // 当前方法名称是否在props中存在，会警告此名称已经在props中存在，因为最终props和methods都要注入到Vue的实例上，所以他们不能有同名存在.
      if (props && hasOwn(props, key)) {
        warn(
          `Method "${key}" has already been defined as a prop.`,
          vm
        )
      }

      // 判断方法名称是否在vue中存在，并且判断该名称是否以_或者$开头
      // 如果以下划线开头，那Vue认为这是一个私有属性，不建议这样命名
      // 如果以$开头，公认为Vue提供的成员，也不建议这样命名
      if ((key in vm) && isReserved(key)) {
        warn(
          `Method "${key}" conflicts with an existing Vue instance method. ` +
          `Avoid defining component methods that start with _ or $.`
        )
      }
    }

    // 最后将methods值注入到Vue实例中来，先判断这个值是否是function，如果不是就直接返回一个noop空函数，如果是就返回该函数的bind方法，bind方法是改变this指向
    vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
  }
}

initData

function initData (vm: Component) {
  // 获取options中的data选项
  let data = vm.$options.data
  // 判断data是否是function，如果是就调用getData
  // 当组件中初始化data的时候会设置成一个函数
  // 如果是Vue实例中的data是一个对象，并没有传入就初始化一个空对象
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  // 接下来获取了data中的所有属性，还获取了props和methods的所有属性，目的也是判断data中的成员是否与props和methods重名.如果有就发送警告.
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    // 判断data的属性是否以_或者$开头，如果是不会注入到Vue的实例中
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    // 如果不是_或者$开头，就会把属性注入到Vue实例中，
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  // 把data转化成响应式对象
  observe(data, true /* asRootData */)
}

initComputed

没有细讲，原理一样

initWatch

没有细讲，原理一样

initProvide

export function initProvide (vm: Component) {
  // 找到$options.provide对象(也可能是函数)，将这个成员存储到vm._provided中(如果是函数，就调用改变其this，如果是对象直接存储)
  // 这个属性在initInject中会使用到
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

stateMixin

混入 $data/$props/$set/$delete/$watch 方法

同级state.js中

export function stateMixin (Vue: Class<Component>) {
  // flow somehow has problems with directly declared definition object
  // when using Object.defineProperty, so we have to procedurally build up
  // the object here.
  // 定义描述符,get方法返回实例对象的_data,_props
  const dataDef = {}
  dataDef.get = function () { return this._data }
  const propsDef = {}
  propsDef.get = function () { return this._props }
  // 如果是开发环境下,不允许给$data和$props赋值
  if (process.env.NODE_ENV !== 'production') {
    dataDef.set = function () {
      warn(
        'Avoid replacing instance root $data. ' +
        'Use nested data properties instead.',
        this
      )
    }
    propsDef.set = function () {
      warn(`$props is readonly.`, this)
    }
  }

  // 通过Object.defineProperty给原型上添加$data,$props
  // 后面是两个对象的描述符,上面给描述符定义了get方法
  Object.defineProperty(Vue.prototype, '$data', dataDef)
  Object.defineProperty(Vue.prototype, '$props', propsDef)

  // 在原型是挂载了$set和$delete,这个与Vue.set\Vue.delete是一模一样的
  Vue.prototype.$set = set
  Vue.prototype.$delete = del

  //原型上挂载了$watch,监视数据的变化
  Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    ...
  }
}

eventsMixin

混入事件相关方法 $on$once$off$emit,这里的事件使用的是发布订阅模式

同级events.js

export function eventsMixin (Vue: Class<Component>) {
  const hookRE = /^hook:/
  // 注册事件
  Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
    const vm: Component = this
    // 判断事件是否是数组,如果是数组就遍历数组给多个事件注册处理函数
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        vm.$on(event[i], fn)
      }
    // 如果是字符串就调用_events,_events是一个对象,之前有定义 vm._events = Object.create(null)
    } else {
      // 对象属性就是事件的名称,根据对象属性找事件存储的内容,如果没有找到就初始化成数组
      // 最终的结果将处理函数添加到数组中
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      ...
    }
    return vm
  }

  // 注册事件(一次性)
  Vue.prototype.$once = function (event: string, fn: Function): Component {
    ...
  }
  // 注销事件
  Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    ...
  }
  // 触发事件
  Vue.prototype.$emit = function (event: string): Component {
    ...
  }
}

lifecycleMixin

混入声明周期相关的方法 _update/$forceUpdate/$destory

同级lifecycle.js

export function lifecycleMixin (Vue: Class<Component>) {
  // 更新,最最核心的是里面调用了patch
  // patch的作用是把虚拟DOM转换成真实DOM挂载到$el中
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    ...
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    // 判断是不是第一次调用,如果是就调用上面的__patch__方法,如果不是就调用下面的__patch__方法
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    ...
  }

  // 强制更新,会调用_watcher的update
  Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
      vm._watcher.update()
    }
  }
  // 销毁Vue实例
  Vue.prototype.$destroy = function () {
    ...
  }
}

renderMixin

混入 _render, $nextTick方法,作用是调用用户传入的render

同级render.js

export function renderMixin (Vue: Class<Component>) {
  // install runtime convenience helpers
  // 安装了渲染相关的一些帮助方法,将Vue原型传入
  installRenderHelpers(Vue.prototype)

  // 挂载$nextTick方法
  Vue.prototype.$nextTick = function (fn: Function) {
    return nextTick(fn, this)
  }

  // 挂载_render方法
  Vue.prototype._render = function (): VNode {
    const vm: Component = this
    // 从options中获取了render,这个render是用户定义的render,或者是模板渲染的render
    const { render, _parentVnode } = vm.$options

    ...
    let vnode
    try {
      ...
      // 核心,在_render中调用了传入的渲染函数
      // 通过call方法调用,第一个方法是改变其内部的this
      // render(h),这个$createElement就是h,生成虚拟DOM
      vnode = render.call(vm._renderProxy, vm.$createElement)
    } catch (e) {
      ...
    } finally {
      ...
    }
    ...
    return vnode
  }
}

二、Vue的初始化过程 ​

Vue的初始化过程 ​

web/runtime/index.js ​

代码结构 ​

core/index.js ​

代码结构 ​

core/instance/index.js ​

代码结构 ​

初始化之静态成员 ​

core/global-api/index.js ​

代码结构 ​

初始化Vue.config对象 ​

Vue.util增加方法 ​

静态方法set/delete/nextTick ​

静态方法Vue.observable ​

初始化Vue.options中的属性 ​

_base记录当前构造函数 ​

注册全局组件keep-alive ​

定义 Vue.use 静态成员 ​

定义 Vue.mixin 静态成员 ​

定义 Vue.extend 静态成员 ​

定义 Vue.directive 等静态成员 ​

初始化之实例成员 ​

initMixmin ​

initProxy ​

initLifecycle ​

initEvents ​

initRender ​

initInjections ​

initState ​

initProps ​

initMethods ​

initData ​

initComputed ​

initWatch ​

initProvide ​

stateMixin ​

eventsMixin ​

lifecycleMixin ​

renderMixin ​

二、Vue的初始化过程

Vue的初始化过程

web/runtime/index.js

代码结构

core/index.js

代码结构

core/instance/index.js

代码结构

初始化之静态成员

core/global-api/index.js

代码结构

初始化Vue.config对象

Vue.util增加方法

静态方法set/delete/nextTick

静态方法Vue.observable

初始化Vue.options中的属性

_base记录当前构造函数

注册全局组件keep-alive

定义 Vue.use 静态成员

定义 Vue.mixin 静态成员

定义 Vue.extend 静态成员

定义 Vue.directive 等静态成员

初始化之实例成员

initMixmin

initProxy

initLifecycle

initEvents

initRender

initInjections

initState

initProps

initMethods

initData

initComputed

initWatch

initProvide

stateMixin

eventsMixin

lifecycleMixin

renderMixin