Vue的两个不同版本

Vue有两个不同的构建版本：

完整版（vue.js）：同时包含编译器（compiler）和运行时的版本（编译器：用来将模板字符串编译为js渲染函数render()的代码）。
运行时（vue.runtime.js）：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是除去编译器的其它一切。 两个版本的主要区别： 比较列 | 完整版 | 运行时版
----------- | ---------------------- | ----------------------- | 特点 | 有compiler | 没有 compiler
| 视图 | 写在html中或者写在template选项中 | 写在 render 函数里，用 h 来创建标签
| CDN引入 | vue.js | vue.runtime.js
| webpack 引入 | 需要配置 alias | 默认使用此版本
| @vue/cli 引入 | 需要额外配置 | 默认使用此版本
完整版里有编辑器compiler，程序中出现了占位符或其他比较复杂的Vue语句时，可以通过分析DOM节点来修改，但是代码体积会比非完整版的大30%。可以从HTML或template直接得到视图，功能更强。
运行时版本里没有编辑器compiler，体积更小，功能更弱。可以配合webpack里的vue-loader来使用，vue-loader负责把template转换成h函数。

建议: 总是使用运行时版本，配合vue-loader使用。

template和render怎么用

以下是 template 在 vue 中的基本使用：

<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

通过 template，可以方便地把需要更新的变量用占位符表示 {{n}}，
点击事件绑定，也只需在button上写 @click="add" 即可。

而 render 函数的同样操作就要麻烦很多，vue给render函数传递一个参数h，用参数h来创建实例:

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

微信截图_20211208225221.png 3. 编写代码

微信截图_20211208225300.png 4. 导出代码

微信截图_20211208225400.png