Vue源码分析——虚拟dom如何渲染成真实dom

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

// app.vue
<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld msg="Hello Vue in CodeSandbox!" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Installed CLI Plugins</h3>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

// src/platforms/web/runtime/index.js
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
):  {
  el = el && inBrowser ? query(el) : undefined
  
  /** 
   * el: {name: "App", components: {…}, render: ?, staticRenderFns: Array(0), _compiled: true, ...rest}
   **/
  return mountComponent(this, el, hydrating)
}

// src/core/instance
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
):  {
  vm.$el = el
  // 1. 检查vm.$options.render是否存在，如果不存在，给出警告
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    if (process.env.NODE_ENV !== 'production') {
      /* istanbul ignore if */
      if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
        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 {
        warn(
          'Failed to mount component: template or render function not defined.',
          vm
        )
      }
    }
  }
  
  // 2. 调用beforeMount生命周期钩子
  callHook(vm, 'beforeMount')

  let updateComponent
 
  updateComponent = () => {
    // mountComponent的核心
    vm._update(vm._render(), hydrating)
  }

  // 3. 生成渲染watcher
  new Watcher(vm, updateComponent, noop, {
    before () {
      // 如果当前vm实例已经被挂载，并且没有被销毁，调用beforeMount生命周期钩子
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

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

// src/core/observer/watcher.js
export default class Watcher {
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    // 当前isrenderwatcher为true
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.before = options.before // 这个函数会选择性调用beforeUpdate钩子函数
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }

    // expOrFn 就是updateComponent函数。
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn // 会走到这里啦
    }
    
    this.value = this.lazy // lazy是false，所以会调用this.get函数。
      ? undefined
      : this.get()
  }
  
  get () {
    pushTarget(this) // 将当前的Dep.target设置为该renderWatcher。
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm) // 在这里会调用updateComponent，即vm._update(vm._render(), hydrating);
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      if (this.deep) {
        traverse(value)
      }
      popTarget() // getter执行完毕后把Dep.target设置为之前的watcher实例。
      this.cleanupDeps()
    }
    return value
  }
}

// 最后一个true用以标示是用户主动调用，即定义了render函数。而非由编译器调用。
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

// 在例子中，传入的参数如下：
vm.$createElement(App);

// src/core/vdom/create-element.js
export function _createElement (
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // 如果传入的data是一个响应式数据，直接创建并返回空vnode
  if (isDef(data) && isDef((data: any).__ob__)) {
    return createEmptyVNode()
  }
  // 处理<component is=""></component>动态组件情况
  if (isDef(data) && isDef(data.is)) {
    tag = data.is
  }
  if (!tag) {
    return createEmptyVNode()
  }
 
  // ... 有删减
  
  // 在例子中，这两个值是相等的。处理过程在createElement中。
  if (normalizationType === ALWAYS_NORMALIZE) {
    // 处理children, 最终生成一个[vnode, vnode, vnode]数组。
    children = normalizeChildren(children)
  } else if (normalizationType === SIMPLE_NORMALIZE) {
    children = simpleNormalizeChildren(children)
  }
  let vnode, ns
  // 此时tag为对象App
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      vnode = new VNode(
        config.parsePlatformTagName(tag), data, children,
        undefined, undefined, context
      )
    } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      vnode = new VNode(
        tag, data, children,
        undefined, undefined, context
      )
    }
  } else {
    // direct component options / constructor
    // 直接进入到这个分支
    vnode = createComponent(tag, data, context, children)
  }
  if (Array.isArray(vnode)) {
    return vnode
  } else if (isDef(vnode)) {
    if (isDef(ns)) applyNS(vnode, ns)
    if (isDef(data)) registerDeepBindings(data)
    return vnode
  } else {
    return createEmptyVNode()
  }
}