Vue完整版与运行时版的区别

196 阅读1分钟

在vue中使用了template就需要用到编译器,

用来将模板字符串编译成为 JavaScript 渲染函数的代码。

完整版,文件名为vue.js,包含了编译器和运行时版

不完整版(运行时版),文件名为vue.runtime.js,除掉编译器的一切

因为运行时版本相比完整版体积要小大约 30%,所以应该尽可能使用这个版本。

完整版可以直接从html获取视图:

//index.html
<div id="app">
    {{n}}
  </div>
//main.js
new Vue({
  el:'#app',
  data:{
    n:0
  }
})
//或者直接在main.js用template
new Vue({
  el:'#app',
  template:`
  <div>{{n}}</div>
  `,
  data:{
    n:0
  }
})

运行时版

//需要用render来构建视图
new Vue({
  el: '#app',
  render(h) {
    return h('div', this.n)
  },
  data:{
    n:0
  }
})

使用codesandbox创建vue项目 登入网站,点击file->new sandbox->vue就可以秒建一个vue项目,可在线码字并且预览