Implementation of instance mount

Mount (vm.mount(vm.mount(vm.options.el)) to mount an instance

version

1. Runtime + compiler
2. Contains only the runtime (SRC/platform/weex/runtime/index. Js)

The VUE documentation also introduces these two versions. Let’s take a look at the implementation of compiler version. Source code: SRC /platform/web/entry-runtime-with-compiler.js

Caching the $mount method on the prototype before redefining it returns the real DOM node by calling the Query (el) method with the el argument.

You can’t mount an EL on a root node like body or HTML because it will replace the el when it is mounted.

If the $options parameter has a render function, the el or template string will be converted to render.

The render function is compiled through compileToFunctions and only the mount function is executed from the original cache

$mount function to call mountComponent function, the function defined in SRC/core/instance/lifecycle. Js:

export function mountComponent (vm: Component, el: ? Element, hydrating? : boolean) :Component {
    / / the cache el
  vm.$el = el
  // Vue only recognizes the render function
  if(! vm.$options.render) {// No render function to create an empty vnode
    vm.$options.render = createEmptyVNode
    if(process.env.NODE_ENV ! = ='production') {
      /* istanbul ignore if */
      // Write template but use runtime-only version warning
      if ((vm.$options.template && vm.$options.template.charAt(0)! = =The '#') ||
        vm.$options.el || el) {
        warn(
          'You are using the runtime-only build of Vue where the template ' +
          'compiler is not available. Either pre-compile the templates into ' +
          'render functions, or use the compiler-included build.',
          vm
        )
      } else {
        // no template, no render
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if(process.env.NODE_ENV ! = ='production' && config.performance && mark) {
    updateComponent = () = > {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () = > {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if(vm._isMounted && ! vm._isDestroyed) { callHook(vm,'beforeUpdate')}}},true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')}return vm
}

Copy the code

The core is the new Watcher method, which executes the updateComponent method in the callback, where _render is executed to generate a VNode and the _update method is called to update the DOM

The main thing is to generate the render function