Vue的两种版本

Vue有两个版本，分别是vue.js（完整版）和 vue.runtime.js（非完整版）。

区别

  1. compiler
    1. 完整版的Vue有compiler
    2. 非完整版没有compiler，这导致了完整版比非完整版的体积大40%左右。

  2. 视图

    1. 完整版的视图写在HTML或template选项里
    2. 非完整版只能写在render函数里，用h来创建标签
      1. // 需要编译器（完整版）
      2. new Vue({
      3. template: '<div>{{ hi }}</div>'
      4. })
      5. // 不需要编译器（不完整版）
      6. new Vue({
      7. render(h) {
      8.   return h('div', this.hi)
      9. }
      10. })

  3. cdn引入

    1. 如果引入的是vue.js就是完整版
    2. 如果引入的是vue.runtime.js就是非完整版
    3. 如果在生产环境下，后缀为.min.js
  4. webpack引入
    1. 完整版需要配置alias
    2. 默认使用非完整版
  5. @vue/cli引入
    1. 需要额外的配置
    2. 默认使用非完整版

最好使用非完整版，然后配合vue-loader和vue文件。
理由：

  • 保证用户体验，用户下载的JS体积更小，但只支持h函数。
  • 保证开发体验，开发者可以直接在vue文件里写HTML标签而不写h函数。
  • 使用loader，可以在不写h函数的基础上得到h函数，vue-loader把vue文件里的HTML转为h函数。

    template 和 render 怎么用

    刚刚在说Vue区别的视图部分，我们提到了 template 和 render ，那我们现在来具体说说他们该如何使用。

template：完整版使用，可以写在HTML或JS中

  1. <template>
  2.   <div class="red">
  3.     {{ n }}
  4.     <button @click="add">+1</button>
  5.   </div>
  6. </template>

上下意思等同

render：非完整版和完整版都可以使用，体积会变大。

  1. render(h){
  2.     return h('div', [this.n, h（'{on:{click:this.add}’,' + 1'])
  3. }

用 codesandbox.io 写 Vue 代码

CodeSandbox是一个在线编辑器，它可以帮助你快速创建一个项目并进行实时预览

创建一个Vue模板
image.png
左边是编辑区右边是预览区，修改代码可以实时更新。

image.png
image.png
可以导出为ZIP形式
image.png