「一」Vue的两个版本

Vue有两个版本，分别是完整版和非完整版。

1. 完整版

完整版同时包括编译器(compiler) 和运行时(runtime)。
编译器的功能是将模板字符串编译为JavaScript渲染函数(render函数)的代码。
运行时的功能包括创建Vue实例、渲染并处理虚拟DOM 等，它包括除了编译器的其他所有功能。

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

非完整版就只有运行时，没有编译器。

两个版本的区别

区别	Vue 完整版	Vue 非完整版	评价
特点	有 compiler	没有 compiler	compiler 占 40% 体积
视图	写在 HTML 里，或者写在 template 选项里	写在 render 函数里，用 h 来创建标签	h 是尤雨溪写好传给 render 的
cdn 引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为 .min.js
webpack 引入	需要配置 alias	默认使用此版	尤雨溪配置的
@vue/cli 引入	需要额外配置	默认使用此版	尤雨溪、蒋豪群配置的

那究竟应该使用哪一个版本呢？
最佳实践是使用非完整版，然后用vue-loader引入compiler
整个流程思路如下：
① 对于用户来说，非完整版（即runtime版）体积小，用户体验好，但只支持 h函数
② 对于程序员来说，只能写 h函数的话，开发体验不好，如果有compiler, 开发者就能写更直观更语义化的HTML标签和template, 所以我们需要一个compiler
③ vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都高兴

「二」template 和 render 的用法

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

// 非完整版，不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

template标签和JS里的template

//vue文件中的template标签
  <template>
      <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

render 函数

//非完整版在js中构建视图
  render(h){ 
       return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])
   }

//非完整版使用vue-loader
//先创建一个demo.vue文件，在里面构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

「三」如何用 codesandbox.io 写 Vue 代码

我们可以在codesandbox里在线写Vue的代码，不用任何本地的安装依赖
点击预览

Vue 两个版本的区别和使用

「一」Vue的 两个版本