浅析VUE的两个版本

273 阅读1分钟

vue存在两个版本,一个是完整版,后缀为vue.js,另一个是运行时版本,后缀为vue.runtime.js.

1.两个版本的区别

完整版可以直接获取文件中的HTMl模板,一般而言html内容是写在template后面的,如下:

new Vue({
  el: "#app",
  template:'
  <div>{{n}}</div>',
  data: {
    n: 0,
  },
});

完整版会将模板中嵌套的文字、占位符等编译为需要真正展示给用户的内容,因此完整版相对于运行时版本而言会内置一个compiler,这使得它所占内存比运行时版本大约百分之四十。这个版本多适用于程序员,因为可以直观的看到所编编写的html内容。而非完整版则无法获取预先编写好的html内容,需要通过render()函数进行编写,如下:

new Vue({ 
  render (h) 
    { return h('div', this.hi) } 
 })

运行时版本不需要对预先的HTMl内容进行编译,因此不内置compiler,其所占内存相对较小,容易获得用户的亲昵。但是,通过vue-loader可以将编写的html内容预编译为h函数,使得在运行时版本中仍然可以提前编写好HTML,这有利于程序员和用户双方的体验。

写代码的小建议

平时在生活中写代码可以在代码沙盒中写,不用自己引入和配置vue,网址如下:codesandbox.io/ 具体的使用大家可以看看网上的这篇文章zhuanlan.zhihu.com/p/268559657