vue的两个版本（完整版和非完整版）

vue的两个版本

完整版和非完整版

1. 完整版
   vue的完整版是包含运行时的版本。完整版是包含compiler（编译器），视图是可以写在 HTML或者template中，运行的时候，直接创建vue实例，渲染，以及处理虚拟DOM中的代码，不用再编译。文件名是vue.js，还有一个运行时的版本vue.min.js。

    // 在HTML中引入完整版vue.js   
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <div id="app">
      {{n}}
    </div>
    
  // 在main.js 创建vue实例
  
    new Vue({
      el: '#app',
      template: `
        <div>{{n}}</div>
      `,
      data() {
        return {
          n: 0
        }
      }
    })

上面的运行结果是：页面会渲染出n的值0

2.非完整版
vue的非完整版是不包含编译器（compiler），不支持将视图写在HTML中 或者template中的，运行时它是通过webpack中的vue-loader，将.vue文件中的模板在构建的时候编译成JS。文件名是vue.runtime.js，还有一个是运行时的非完整版vue.runtime.min.js。

将上面代码中script中引入的vue换成https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.js，运行的结果是页面上不会渲染出n的值。

    // 1.在HTML中引入非完整版的vue
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.runtime.js"></script>
    <div id="app">
      <span>{{n}}</span>
      <button @click="add">12312</button>
    </div>

    // 2.创建vue实例，并编译
    
    new Vue({
      el: '#app',
      render(h) {
        // h函数是createElement的缩写
        // return h('div', this.n)
        return h('div', [this.n, h('button', { on: { 'click': this.add } }, '增加')])
      },
      data() {
        return {
          n: 0
        }
      },
      methods: {
        add() {
          this.n += 1
        }
      }
    })

运行的结果是，点击页面按钮会执行+1的操作。
3.两者的比较

	完整版	非完整版
特点	有compiler	无compiler（体积比完整版小40%）
视图	可以写在html中或者template	先将写在html中的DOM编译，通过render函数再创建标签，并渲染出来
cdn引入	vue.js(vue.min.js)	vue.runtime.js(vue.runtime.min.js)
webpack引入	需要配置别名（alias）	默认非完整版
@vue/cli引入	需要额外配置	默认非完整版

4.总结
平时开发所使用的的就是非完整版

• 保证用户体验，下载的js文件体积小
• 保证开发体验，开发者可以直接在vue文件中写HTML，而不要用写render函数
• 所有的编译工作，会通过webpack中的vue-loader来编译执行，将写的HTML转换成h函数，从而提高用户体验，节约文件大小。