Vue 两个版本的区别和使用方法

dlxxdlcc
189 阅读2分钟

Vue有两个不同的版本，分别是Vue完整版（vue.js）和Vue非完整版（vue.runtime.js）

区别

  1. 术语
  • 完整版：同时包含编译器和运行时的版本。
  • 编译器（compiler）：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  1. 区别

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

  1. 思路：
  • 保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数
  • 保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数
  • 中间的转换过程让 loader 来做，vue-loader把 vue 文件里的 HTML 转为 h 函数

使用方法

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

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

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

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

优缺点

完整版（vue.js）:

  1. 优点：逻辑清晰简单，好写好用。
  2. 缺点：
  • 开发需要额外配置版本引用
  • 视图模板写在HTML/template里，代码量大的时候显得冗余
  • 需要通过compiler解析器才能把HTML/template模板编译成Dom去渲染，意外增大代码体积
  • 代码体积较非完整版大30%，用户体验较差

非完整版（vue.runtime.js）

  1. 缺点：对初级开发者可能不友好
  2. 优点：
  • render函数之强大，它较于HTML/template模板内要写繁琐冗余的代码而言要高效简洁很多，甚至还能在函数体里面进行一些额外的代码逻辑。
  • 不需要解析器，webpack等配置有vue loader，vue loader的作用是在代码打包的时候r调用compiler自动解析编译。
  • 代码体积较小，提升用户体验。

使用codesandbox.io写Vue代码

  1. 进入官网 codesandbox.io

  2. Create Sandbox

  3. 选择 Vue

avatar
文章
阅读
粉丝