vue的完整版和运行时版的区别

const h = this.$createElement;
      this.$Modal.confirm({
        title: xxx,
        content: h('div', [h('p', {
          style: {
            'font-size': '14px',
            color: '#0A1F44',
            'line-height': '28px',
            'margin-bottom': '12px',
          },
        }, xxx), h('p', {
          style: {
            'font-size': '14px',
            color: 'red',
            'line-height': '24px',
            'margin-bottom': '32px',
          },
        }, 'xxx'))]),
        onConfirm(instance: any) {
          that.submitForm(that);
          instance.destroy();
        },
      });

用h函数来创建标签。h函数，第一个参数为标签名，来构造dom。不用template那种

转载：

完整版和运行时版

打开vue的官网，你会发现有vue有两种不同的构建版本，Vue官方对两种不同构建版本的解释是这样子的：

• 完整版：同时包含编译器和运行时的版本（编译器：用来将模板字符串编译为js渲染函数的代码）

• 运行时：用来创建Vue实例，渲染并处理虚拟DOM等的代码，基本上就是出去编译器的其它一切。

两种版本	UMD	Commonjs	基于构建工具使用	直接用于浏览器
完整版	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
运行时版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js

两种版本的区别

比较列	完整版	运行时版	评价
特点	有compiler	没有 compiler	完整版体积较大，其中仅compiler就占整个文件40%大小
视图	写在html中或者写在template选项中	写在 render 函数里，用 h 来创建标签	h 是尤雨溪写好传给 render 的
CDN引入	vue.js	vue.runtime.js	文件名不同，生成环境后缀为 .min.js
webpack 引入	需要配置 alias	默认使用此版本	尤雨溪所配置
@vue/cli 引入	需要额外配置	默认使用此版本	尤雨溪蒋豪群所配置

最佳实践：总是使用非完整版，然后配合vue-loader 和 vue 来进行使用。

思路：

• 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。

• 保证开发体验，开发者可直接在 vue 文件里面写 html 标签，而不写 h 函数

• 脏活累活让 loader 做，vue-loader 把 vue 文件里面的 html 转为 h 函数。