Vue完整版与非完整版区别

官方文档的解释

总结

两个版本对应的文件名

• 完整版

  • 文件名：vue.js和vue.min.js
  • 含min的是压缩版，表示是在生产环境下给用户使用的版本，取消了注释和警告

• 运行时版本

  • 文件名：vue.runtime.js或者vue.runtime.min.js
  • 同样的，含min的是压缩版，表示是在生产环境下给用户使用的版本，取消了注释和警告

template和render怎么用

template(完整版使用)

• 代码

1
2
3
4

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

• 完整版拥有更多的功能，我们可以在template里写模板代码，编译器会自动进行转换

render的使用（运行时版使用）

• 代码

1
2
3
4
5
6

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

• 运行时版本缺少了编译器，所以无法直接在template下写html
• 此时需要通过render提供的一个h函数，编写h函数下的代码实现转换
• 如果我们把html文件写在.vue文件下，使用h函数来render里面的内容，，vue会通过内部的vue-loader实现编译器的效果

使用建议

运行时版比完整版的体积小了约30%,所以尽可能使用运行时版以减小代码体积，提升用户体验。