vue完整版和runtime版本，render和template对比

vue完整版和runtime版本

完整版

对应的文件名为vue.js或vue.min.js。
完整版 = 运行时版+编译器（编译器：将模板字符串编译成为JS渲染函数的代码）
该版本有编译器，占用代码体积，所以比runtime版大40%的体积。
使用该版本，可直接将内容写在HTML中查看视图效果，或用template 渲染到 HTML。
webpack引入，需要配置alias，@vue/cli 引入也需要额外配置。

// html
<div id="app"></div>

// main.js
new Vue({
  el: "#app", // 模版字符串插入的位置
  template: `
    <div>{{ value }}</div>
  `,  // 模版字符串
  data: {
    value: 0
  }, // 替换的数据，即{{ value }} 被替换为0
})

最后获得的html

<div id="app">0</div>

运行版

是只包含运行时的版本，没有编译器，CDN引入所对应的文件名为vue.runtime.js或vue.runtime.min.js。
因该版本无编译器，故占用代码体积小，但无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点。h就是vue.runtime.js提供的函数，它接收模版字符串中的参数，返回渲染好的原始的html。
vue.js的webpack引入和@vue/cli 引入都默认使用此版本。

new Vue({
  el: "#app",
  data: {
    value: 0
  },
  render(h) {
    return h('div', this.n)
  },
})

在实际开发中，由于h函数的参数比较复杂，实际开发中通过使用webpack的vue-loader插件能将vue单文件组件（以.vue结尾的文件）转换为h函数所需要的参数。

如将vue.js错引用为vue.runtime.js，则无法将HTML编译为视图；
如将vue.runtime.js错引用为vue.js，代码体积会变大

比较项	vue.js	vue.runtime.js	评价
特点	有编译器(compiler)	无编译器	编译器占40%的体积
视图	写在HTML里或者写在template里	写在render函数里，用h创建标签	h是vue内置的回调函数
CDN引入	vue.js	vue.runtime.js	文件名不同，生产环境后缀都为.min.js (vue.min.js/vue.runtime.min.js)
webpack引入	需配置alias	默认使用此版本	vue作者配置的
@vue/cli引入	需要额外配置	默认使用此版本	vue作者配置的

总结

完整版可直接将内容写在HTML中查看视图效果，或用template渲染到HTML。
运行时版无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点，vue.js的webpack引入和@vue/cli 引入都默认使用此版本。
运行时版最大的意义就在于体积小。
单文件组件：由于h函数的参数比较复杂，可以使用vue-loader把vue文件里的HTML转为h函数。

template 和 render

参考：www.cnblogs.com/wuqilang/p/…

template----html的方式做渲染
render----js的方式做渲染
render（提供）是一种编译方式： render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
h就是createElement()方法：createElement(标签名称,属性配置,children)
template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。

区别

render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
template是类似于html一样的模板来进行组件的封装。
render的性能比template的性能好很多。
render函数优先级大于template。

template

类型：string
详细：一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的43. 内容都将被忽略，除非模板的内容有分发插槽。其他：只适用于vue的完整版中，与el属性配合使用。

用template在页面中显示一个0

index.html

<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</body>

main.js

new Vue({
  // 元素 element
  el: '#app',
  template: `
    <div>{{n}}</div>
  `,
  data: {
    n: 0
  }
})

render

类型：function
详细：接收一个回调函数h（h为vue中内置的回调函数），h包含两个参数。第一个参数为渲染的dom对象名（字符串），第二个参数为dom内的内容。例如：render(h){ h('div','hello vue') }

用render在页面中显示一个0

index.html

<body>
  <div id="app"></div>
</body>

main.js

new Vue({
  // 元素 element
  el: '#app',
  render(h){
      // 创建一个div 里面是 n
    return h('div', this.n)
  },
  data: {
    n: 0
  }
})