浅析Vue的构建版本

Totny_
366 阅读2分钟

编译器

  • 由于Vue有特有的api，比如v-for、v-if、v-show、{{}}，那么就需要有对应的工具去读取、解析、转换。这个工具就是编译器了。
  • Vue文档给编译器的主要功能做了说明，即编译器是用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 这时我们发现其实用户是不需要编译器的，毕竟用户又不写代码，只需要浏览网页。
  • 如果把编译器集成在js中就导致js体积变大。Vue文档对此也有说明，有编译器的js对比没有编译的js体积大30%左右。

构建版本

Vue对是否含有编译器将Vue版本分为完整版和运行时版本(非完整版)。

完整版

  1. 完整版包含了编译器，因此可以直接在html或者options对象中的template字段使用模板字符串、Vue指令。
  2. 完整版的文件名不包含runtime，例如：vue.js
new Vue({
    el: '#app',
    template: `
      <div v-if="true">
        Hello,Vue
      </div>
    `
})

非完整版

  1. 非完整版没有编译器，因此不能使用模板字符串、Vue指令，如果使用了就会报错。这时可以使用render()函数进行渲染视图。
  2. 非完整版包含runtime，表明这是运行时版本，即不包含编译器。文件名：vue.runtime.js
  3. render()函数接受一个h函数。返回h函数的返回值。
  4. h()函数第一个参数是标签名，第二个参数是标签内容
new Vue({
  el:'#app',
  render: h => h('div','Hello'),
})

最佳实践

  • 通过以上内容分析，用户不需要编译器，而开发者又需要编译器。(开发者没有编译器只能使用render()函数进行渲染视图，代码变得难写且容易出错。)
  • 这看似没有两全其美的解决方案了。幸好我们有webpack。webpack可以对代码进行分析、转译、压缩、打包。我们需要为Vue组件安装vue-loader即可实现以上功能。

vue-loader

安装vue-loader后，webpack就会将vue组件进行编译，最后变成一个对象。该对象可以作为参数赋值给h函数。

对象

import Demo from './demo.vue'

new Vue({
  el:'#app',
  render: h => h(Demo),
})

有了vue-loader后，开发者可以继续使用vue的api，用户获取的js也不需要包含编译器。
使用vue-loader就是最佳实践、完美的解决方案。

avatar
文章
阅读
粉丝