1、入口代码

new Vue({
       el:'#root',
        data:{ 
             name:'uzi',
             rank:'RNG'
        }
 })
或者
 new Vue({
       el:'#root',
        data:{ 
             name:'uzi',
             rank:'RNG'
        }
 }).$mount("#app")

2、Vue.prototype._init方法

• 合并配置
• initLifecycle：初始化生命周期
• initEvents：初始化事件中心
• initRender：初始化渲染器
• initState：初始化props、data、computed、watch

function Vue (options) {
  this._init(options)
}
 

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  vm._uid = uid++
  let startTag, endTag

//合并配置
  if (options && options._isComponent) {
    initInternalComponent(vm, options)
  } else {
    vm.$options = mergeOptions(
      resolveConstructorOptions(vm.constructor),
      options || {},
      vm
    )
  }

  vm._renderProxy = vm
  vm._self = vm

  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) 
  initState(vm)
  initProvide(vm)
  callHook(vm, 'created')

  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

3、Vue.prototype.$mount方法

• 最终返回一个 new Watcher，回调cb为vm._update(vm._render())来更新视图。

const mount = Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
    el = el && query(el)
    if (template) {
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns
    }
  }
  return mount.call(this, el, hydrating)
}


export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  callHook(vm, 'beforeMount')

  let updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)

  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

欢迎关注我的前端自检清单，我和你一起成长