浅析Vue的两个版本

使用codesandbox

如果你不想每次在本地练习时都要创建一个vue项目并选择配置的话（即使是使用之前预制的模板），那么一个网页版的开发工具 codesandbox非常推荐使用,它可以快速开启你的项目而免去配置项目文件。
它除了有Vue的模板外，还有React、Angular等大量的其他模板，感兴趣的可以自行前往使用，这里只简单介绍如何创建和使用Vue项目。
codesandbox的编辑器使用的是vscode的编辑器，如果你对vscode比较熟悉的话可以几乎无过渡就可以使用了。一些比较特殊的点已在图中标明，首先要注意的是不要登录（官网也说了不是必须要登录才能使用），除非你要自己创建模板，而且登录后创建项目会有个数限制，所以还是不要登录直接使用吧。其次是如果这个项目想保存下来，那么可以点击Files红框内的下载按钮把这个项目下载到本地使用（顶部的菜单栏file处也可以下载）。

完整版和非完整版

完整版同时包括编译器(compiler) 和运行时(runtime)
编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码

运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能
```
new Vue({
  // render: h => h(App),
}).$mount('#app')
```
只包含运行时版就只有运行时，没有编译器

两个版本的区别

	Vue完整版	Vue只包含运行时版
特点	有compiler	没有compiler
视图	写在HTML里，或者写在template选项里	写在render函数里，用h创建标签
cdn引入	vue.js	vue.runtime.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: '
{{ hi }}
'
})


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

template标签和JS里的template


//vue文件中的template标签
  

//js中的template
    template : `
        
      
          {{n}}
          +1   
        
 
    `

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)
       }
     })

浅析Vue的两个版本区别

使用codesandbox

完整版和非完整版

两个版本的区别

template 和 render 的用法