Vue 完整版和运行时版的实现原理

一、为什么要分成两个版本？

主要是基于用户的角度考虑，当使用完整版时，Vue 需要写一个编译器 compiler 对模板字符串进行编译，而编译器却占了 40% 的代码量，导致生成给用户的代码量变多，从而影响用户体验。而运行时版本主要就是对编译器进行了优化，通过使用 webpack 的加载器 vue-loader 代替 compiler ，使得打包给用户的代码量减少，达到提高用户体验的目的。

二、理解运行时版本的原理

以下代码是 Vue 完整版的运行代码，模板字符串 template 模块的代码需要使用编译器 compiler 先编译，然后再使用 webpack 打包，而 webpack 会把依赖模块编译器 compiler 的代码也一起打包，导致生成的代码量增大，影响用户体验。以下 script 引用的都是 Vue2 ，若使用 Vue3 会报错，因为 Vue3 中的 Vue 不是一个构造函数。

<div id="app">{{m}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.min.js"></script>

new Vue({
  el: "#app",
  data: {
    m: 5
  },
  template: `
    <div id="app">
      {{m}}
      <button @click="add">+1</button>
    </div>
  `,
  methods: {
    add () {
      this.m += 1
    }
  }
})

而 Vue 运行时版则不需要模板字符串 template 模块，而是直接使用 webpack 的 vue-loader 加载器，vue-loader 加载器会把 vue 文件里的 HTML 转为 h 函数，然后被 render 方法 调用和渲染出来。这个过程不需要用到编译器 compiler，使得打包的代码量也大为减少。 h 函数 的主要作用是保证开发体验。

<div id="app">{{m}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.0/vue.runtime.min.js"></script>

new Vue({
  el: "#app",
  data: {
    m: 5
  },
  render (h) {
    // h 方法相当于 createElement
    return h('div', [this.m, h("button", { on: { click: this.add } }, +1)])
  },
  methods: {
    add () {
      this.m += 1
    }
  }
})