从new Vue可以看出,Vue是一个类,new Vue表示实例化这个类,那么这个类定义在哪里呢,观察源码可以看到定义的路径在
    src/core/instance/index.js

    1. function Vue (options) {
    2. if (process.env.NODE_ENV !== 'production' &&
    3. !(this instanceof Vue)
    4. ) {
    5. warn('Vue is a constructor and should be called with the `new` keyword')
    6. }
    7. this._init(options)
    8. }

    根据以上可以看出,new Vue的时候传入配置项开始初始化,调用了_init方法,该方法是挂载在Vue实例上的,源码路径
    src/core/instance/index.js

    1. export function initMixin (Vue: Class<Component>) {
    2. Vue.prototype._init = function (options?: Object) {
    3. const vm: Component = this
    4. // a uid
    5. vm._uid = uid++
    6. let startTag, endTag
    7. /* istanbul ignore if */
    8. if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    9. startTag = `vue-perf-start:${vm._uid}`
    10. endTag = `vue-perf-end:${vm._uid}`
    11. mark(startTag)
    12. }
    13. // a flag to avoid this being observed
    14. vm._isVue = true
    15. // merge options
    16. if (options && options._isComponent) {
    17. // optimize internal component instantiation
    18. // since dynamic options merging is pretty slow, and none of the
    19. // internal component options needs special treatment.
    20. initInternalComponent(vm, options)
    21. } else {
    22. vm.$options = mergeOptions(
    23. resolveConstructorOptions(vm.constructor),
    24. options || {},
    25. vm
    26. )
    27. }
    28. /* istanbul ignore else */
    29. if (process.env.NODE_ENV !== 'production') {
    30. initProxy(vm)
    31. } else {
    32. vm._renderProxy = vm
    33. }
    34. // expose real self
    35. vm._self = vm
    36. initLifecycle(vm)
    37. initEvents(vm)
    38. initRender(vm)
    39. callHook(vm, 'beforeCreate')
    40. initInjections(vm) // resolve injections before data/props
    41. initState(vm)
    42. initProvide(vm) // resolve provide after data/props
    43. callHook(vm, 'created')
    44. /* istanbul ignore if */
    45. if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    46. vm._name = formatComponentName(vm, false)
    47. mark(endTag)
    48. measure(`vue ${vm._name} init`, startTag, endTag)
    49. }
    50. if (vm.$options.el) {
    51. vm.$mount(vm.$options.el)
    52. }
    53. }
    54. }

    从上面的这个_init函数可以看出,初始化主要做了以下几件事

    1. 合并配置(options的合并)
    2. 初始化生命周期
    3. 初始化事件
    4. 初始化渲染
    5. 初始化 data,props,computed,watcher

    下面我们来分析这段代码

    1. if (vm.$options.el) {
    2. vm.$mount(vm.$options.el)
    3. }

    在上述_init函数的最后,检测是否有el属性,有的话就执行vm.$mount方法挂载vm,把模版渲染为真实的DOM。