Vue 两个版本的区别

vue完整版和runtime版本

比较项	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/cli引入	需要额外配置	默认使用此版本

总结

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

template 和 render 怎么用

完整版template

// 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>

运行时版render

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

codesandbox.io 写 Vue 代码

在codesandbox.io/s/里创建vue直接使用

• 创建沙盒：右上角create sandbox创建一个vue沙盒。
• 导出文件：左上角file->export to ZIP
• 引入外部静态资源：左下角External resources 一栏