Vue完整版和非完整版的区别

171 阅读1分钟

1、文件名

  • 完整版文件名:vue.js
  • 非完整版文件名: vue.runtime.js
  • 生产环境后缀名为:.min.js

2、templaterender的使用

完整版的视图是写在HTML里或template选项的,由于有 compiler(编译器)的存在,完整版运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

非完整版的视图是写在render里的,是用h函数来创建标签。非完整版运行时:当使用 vue-loader的时候,.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

  • 完整版视图写在HTML标签或template中:
// 需要编译器compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})
  • 非完整版需要写在render函数里用h创建标签:
/ 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

3、如何使用 codesandbox.io 写 Vue 代码

第一步:点击 create sandbox

第二步:选择Vue

创建Vue后,就会自动帮你生成所需文件了