Vue 的三种 template 模板写法

1、Vue 的两个不同版本的介绍

首先你要了解如何创建一个 Vue 项目，如果你还不熟悉的话，可以移步到这里：传送门。创建 Vue 项目的过程中会涉及到 Vue 两个不同版本的选择：（1）完整版：vue.js、（2）只包含运行时版：vue.runtime.js 下面说一下它们之间的差异：

完整版：同时包含编译器和运行时的版本（compiler + runtime）。

编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码（compiler）。

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

推荐使用 vue.runtime.js 非完整版，然后配合 vue-loader 和 vue 文件思路，这样可以保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。而且可以保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数，多余的工作让 loader 做，vue-loader 把 vue 文件里的 HTML 转为 h 函数。

2、运行时+编译器 vs 只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

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

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名，详情移步：传送门

3、template 和 render() 的使用区别

在 Vue 完整版 vue.js 下可以使用 template 选项，因为其内置 compiler 编译器，可以将 template 字符串编译成 h 函数，从而达到直接从 HTML 渲染视图的效果。如果是在 Vue 非完整版 vue.runtime.js 下就只能使用 render 的 h 函数，通过 JS 构建的方法来达到渲染视图的效果。

//完整版 - 需要 compiler 编译器 - 编译 template
new Vue({    //这个vue实例封装了一些东西，类似jQuery封装的 return api
  el:'#app', //el代表渲染挂在节点，会被替换，同$mount('#app')    //涉及到 SEO 友好、服务端渲染
  data:{ num:0 }                      //完整版支持从html中获取视图
  template: '<div>{{ num }}</div>'    //template内容可以写在html文件中，完整版都支持
})
//运行时版 - 不需要 compiler 编译器 - 只能使用 h 函数
new Vue({    //这个vue实例封装了一些东西，类似jQuery封装的 return api
  render (h) {    //不支持template选项或从html中获取视图
    return h('div', this.num)    //可以将 h 函数类别成 createElement()
  }
})

补充，运行时版通过 render 和 h 函数来创建视图，看似麻烦，但是这种方式是比较提倡的，这也就是为什么在 使用 webpack 引入 或 @vue/cli 引入时 默认使用此版本，那么具体原因是什么呢？

我们知道完整版使用 运行时 vue.runtime.js + 编译器 compiler 组合的形式，支持直接将写在 template 或 html 文件中的字符串编译成 dom 节点，非完整版只有运行时 vue.runtime.js，不支持上述编译，但实际上非完整版有一个 预编译的 loader 加载器，使用 vue.runtime.js 非完整版，然后配合 vue-loader 可以将写在 vue 文件中的 HTML 标签转义为 h 函数，实现预编译的功能。

使用 vue.runtime.js 非完整版配合 vue-loader 可以保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。而且可以保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数，多余的工作让 loader 做，vue-loader 把 vue 文件里的 HTML 转为 h 函数。

4、两种不同的构建版本的具体使用

现在我们分别使用 Vue 两种不同版本的构建工具实现一个点击按钮数字加一的功能，来具体看一下两种版本的实现方式：

（1）使用完整版（vue.runtime.js + compiler）支持将 template 选项或 html 文件中的代码直接编译成页面的 dom 节点。

<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    template: `<div>{{ num }} <button @click="increment">+1</button></div>`,
    data: {
      number: 0
    },
    methods: {
      incremente() {
        this.num ++;
      }
    }
  });
</script>

（2）仅使用运行时版（vue.runtime.js ）可以实现同样的效果，但是项目体积会更小，但是这对开发人员不友好。

<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: { num: 0 },
    methods: {
      increment() {
        this.num ++;
      }
    },
    render(createElement) {
      return createElement("div", [
        this.num,
        createElement("button",{ on: { click: this.increment } }, "+1")
      ]);
    }
  });
</script>

两种方式的优缺点：第一种完整版的方式对开发人员友好，html 可以直接写到 template 或 html 文件中，完整版可以通过编译器直接将其渲染成页面给上的 dom 节点，但是较运行时版体积较大。第二种运行时版的方式对开发人员不友好，但是项目体积较少。

为应对上述问题，可以将 运行时版结合 vue-loader + *vue文件 的方式，可以将写在 vue 文件中的 html 预先转化为 h 函数的形式，这样即可以满足项目体积小用户体验好，又可以满足开发人员直接写 html 的两种需求，完美！

5、用 codesandbox.io 写 Vue 代码

如果你需要在新的环境，或在其他接触不到你自己电脑的环境下开发，推荐使用 CodeSandBox 进行在线开发。

CodeSandbox 是一个为 Web 应用程序开发而构建的在线编辑器，这个网站内置了多种 Web 开发框架的编译及运行配置，使得开发人员不需要进行繁琐的项目配置就可以着手进行开发工作，从而更好的专注于编写代码。CodeSandbox  仿佛就是一个在线的 webstorm 编译器，并且还给你设置好了所有开发前的准备配置，它还支持以 zip 的形式导出你的项目，赶快去试试吧 ~