完整版：vue.js
内含compiler，编译器可以把试图上的html转成DOM节点，转成html中的内容，所以体积大，不建议用，是从HTML获得视图。
vue.js vue.min.js
完整版的 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() 只能出现一个。
优点：
可以在 html 文件中直接写 Vue 语句，可读性强些
缺点：
- 体积比非完整版大
- 耦合性太大，在 html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大
非完整版：vue.runtime.js
非完整版中的html只是字符串，且不能从html中获取视图，但是可以通过webpack内的vue-loader,来调用pomliler,把其转成h()函数，用户下载的js文件体积变小了
vue.runtime.js vue.runtime.min.js
优点：
- 体积小，非完整版的体积比完整版小了30%多
- 耦合性低，模块化强
缺点：
- 目前不知
template 和 render
VUE一般使用template来创建HTML，
然后在有的时候，
我们需要使用javascript来创建html，这时候我们需要使用render函数。
template----html的方式做渲染
templete是视图的内容，可以直接包含html内容，常直接放在视图层，用在完整版就直接把html显示在视图
先来看一个需求：下图div用v-for做了列表循环，现在想要span也一起循环，应该怎么做？
< div id =" app "> < div > < div v - for ="( item , index ) in list ": key =" item . id ">(( item . textJ )--(( index ) J </ div >< span >(( item . text ]]</ span > </ div > </ div >
- 有3种方法可以实现
直接用v-for对span也循环一次（该方法虽然可以使用，但不要用这种方式，因为以后你会哭）
< span v - for ="( item , index ) in list ": key =" item . id "> item . text ))</ span >
- 在div和span外面包裹一个div，给这个div加循环（该方法会额外增加一个多余的div标签）
< div id =" app "> < div v - for ="( item , index ) in list ”: key =" item . id "> < div >( item . text ))--(( index ))</ div > < span >{{ item . text ))</ span > </ div ></ div >
- 若你不想额外增加一个div，此时应该使用template来实现（推荐）
< template v - for ="( item , index ) in list ": key =" item . id "> < div >(( item . text ]}--(( index )}</ div > < span >(( item . text ]}</ span > </ template >
template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
renderr----js的方式做渲染
简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM
因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h,
vm中有一个方法_c,也是这个函数的别名。
render函数怎么用
render:(h) => { return h('div',{ //给div绑定value属性 props: { value:'' }, //给div绑定样式 style:{ width:'30px' }, //给div绑定点击事件 on: { click: () => { console.log('点击事件') } }, }) }
总结
相同之处：
render 函数 跟 template 一样都是创建 html 模板
不同之处：
- Template适合逻辑简单，render适合复杂逻辑。
- 使用者template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。
- render的性能较高，template性能较低。这一点我们可以看一下，下图中vue组件渲染的流程图可知。
- 基于上一点，我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误
- Render 函数的优先级要比template的级别要高，但是要注意的是Mustache(双花括号)语法就不能再次使用
如何用 codesandbox.io 写 Vue 代码
codesandbox.io/ 创建vue项目即可
