Vue 的两个版本

写在前面

一般情况下各种 js框架 会在不同的模块规范下提供不同的版本的 .js 文件，常用的模块规范是 umd（统一模块定义）。在同一模块规范下也可定义使用不同场景的 .js 文件。

常见的就是 umd模块规范下的 .js 和 .min.js 两个 主文件 类型的 js 文件。二者的区别就是，.js 文件是未压缩的、带有注释和缩进格式的源文件，体积大，但易于查看源代码。.min.js 文件是压缩后的、无注释和缩进、体积更小的文件。一般我们在使用时 CDN 引入时会选择 .min.js 文件。

许多更为复杂的 js库 会提供更多适用不同场景的库文件。

vue 就提供了两个完全不同版本的 .js 文件，这就导致用户在开发 vue项目 时要根据需要选择对应版本的 vue 引入。

1. 完整版

1.1 完整版的 vue 文件名

vue.js

vue.min.js

1.2 完整版定义公式

完整版 = 编译器 + 运行时

因此由版本定义公式可知，完整版包含非完整版的一切功能，也就是说，用户可以安装完整版的 vue 后仅仅使用非完整版的功能，但用户不能安装非完整版的 vue 后使用完整版的某些功能。

1.3 完整版自带的编译器公式

完整版自带的编译器 = 编译器（vue-template-compiler）+ vue-loader

1.4 完整版的 html 的书写位置

完整版的 vue 的 html 书写位置有两个，一个是在 .html 文件中写 vue 对应的 xml 语法，如下：

<div>{{ hi }}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

另外一个 html 书写位置在 new Vue() 的构造选项里的 template: 变量 处写 vue 对应的 xml 语法，如下：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

当然了，因为是完整版，在引入 vue-loader 后完全可以按照非完整版书写 html 位置的方式写。唯一需要注意的是，在 new Vue() 构造选项中，template: 和 render() 只能出现一个。

2. 非完整版（只包含运行时版）

2.1 非完整版的 vue 文件名

vue.runtime.js

vue.runtime.min.js

2.2 非完整版定义公式

非完整版 = 运行时

2.3 非完整版自带的编译器公式

非完整版自带的编译器 = vue-loader

2.4 非完整版的 html 的书写位置

非完整版的 vue，html 的书写位置有且仅有两种方式，一种是直接通过原生 vue.js 的 render() 函数，严格按照 vue.js 提供的接口和传参方式进行 DOM元素 的创建，如下：

// 不需要编译器
new Vue({
  data(){
    return {
        hi: 'say hi'
    }
  }
  render(h) {
    return h('div', this.hi)
  }
})
//h 就是 createElement函数，vue 的作者常用 h 简写 createElement
//此时的 render()函数就是 vue.js 暴露出的创建 DOM元素 的接口，h() 的大致实现内容就是使用原生 DOM接口，创建一个 div 元素，设置其里面的内容为 hi 变量的值。

另外一种书写位置，就是写在一个单独的 *.vue 文件中的 标签内，通过 vue-loader 加载器，将其转化为对应的 render() 函数里面的内容。vue-loader 配合 webpack ，便于更好地、更方便地开发 vue项目。如下是个 .vue 文件

<template>
      <div id="app">
            <div>{{ hi }}</div>
      </div>
</template>

<script>
      export default{
          data(){
             return{
                 hi: 'say hi'
             }
          }
      }
</script>

<style scoped>
      #app{
         color: red
      }
</style>

非完整版不能直接在 .html 文件中写 html，也不能使用 template: 变量。

补充：

在 .vue 文件中的 <template></template> 标签里面的内容不是 HTML 语法，是 XML 语法，因此应遵循 XML 的语法标准。XML 和 HTML 语法差不多，但是 XML 相比于 HTML 要更严格一些，比如在 XML 中有闭合标签一说，且单标签必须闭合，如 <input/>，但在 HTML 中单标签不闭合是正确的、最新的语法。同时还有一个区别是在 XML 中当标签内没有内容时可直接 / 闭合，如 <div/> ，但在 HTML 中，则不行。严格的 XML 语法比松散的 HTML 语法相比起来更容易编译，因此 Vue 就选择了 XML 语法

3. 完整版和非完整版的优缺点

目前 Vue 的使用基本都是非完整版，@vue/cli引入 和 webpack引入 的vue文件都是非完整版。若想在 webpack 中坚持使用完整版，则需要额外的配置信息，详见vue官网配置

完整版：

优点：
1.可以在 html 文件中直接写 Vue 语句，可读性强些

缺点：
1.体积比非完整版大
2.耦合性太大，在 html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大

非完整版：

优点：
1.体积小，非完整版的体积比完整版小了30%多
2.耦合性低，模块化强

缺点：
1.目前不知

4. vue 中设计的两个编译器的区别

4.1 编译器（vue-template-compiler）

编译器的作用就是将 Vue 语句在编译时还原成 html 元素才能在浏览器上渲染出来，完整版的 Vue 是通过编译器来实现的。

4.2 webpack加载器（vue-loader）

vue-loader 就是将*.vue文件翻译成 render() 函数里元素创建语法的。因此非完整版用到了 vue-loader ，但是没有用到 compiler 即编译器，因为 render() 函数就是渲染 html 元素的，不再需要编译器。