Vue的两个版本

Vue次要有两个版本，别离是完整版和非完整版

完整版是vue.js / vue.min.js
非完整版是vue.runtime.js / vue.runtime.min.js
(vue.js是多了一些正文，min.js是去掉了正文，压缩了代码)

完整版

完整版同时包含编译器(compiler) 和 运行时(runtime)

编译器的性能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码

运行时的性能包含创立 Vue 实例、渲染并解决虚构 DOM 等，它包含除了编译器的其余所有性能

只蕴含运行时版

只蕴含运行时版就只有运行时，没有编译器

两个版本的区别

Vue完整版Vue运行时版
特点有compiler没有compiler
视图写在HTML里，或者写在template选项里写在render函数里，用h创立标签
cdn引入vue.jsvue.runtime.js
webpack引入须要配置alias默认应用
vue@cli引入须要额定配置默认应用

那到底应该应用哪一个版本呢？
最佳实际： 永远用非完整版，而后配合vue-loader和vue文件

起因

  1. 对于用户来说，非完整版下载的js文件体积小，用户体验好，但只反对h函数
  2. 保障开发体验，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能在vue文件里写更直观的HTML标签和template, 所以咱们须要一个compiler
  3. vue-loader就能够引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都快乐

template 和 render 的用法

// 须要编译器new Vue({  template: '<div>{{ hi }}</div>'})// 不须要编译器new Vue({  render (h) {    return h('div', this.hi)  }})

template标签和JS里的template

//vue文件中的template标签  <template>      <div id="app">                {{n}}          <button @click="add">+1</button>        </div>   </template>//js中的template    template : `        <div id="app">                {{n}}          <button @click="add">+1</button>           </div>     `

render函数：

//不完整版在js中构建视图  render(h){        return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])   }//不完整版应用vue-loader//先创立一个demo.vue文件，在外面构建视图    import demo from "./demo.vue"     new Vue({       el: "#app",       render(h) {         return h(demo)       }     })

codesandbox在线创立Vue我的项目

  1. 进入官网https://codesandbox.io/
  2. 点击 "Create a Sandbox, it's free"
  3. 抉择 "Vue"
  4. 能够把我的项目下载到本地，抉择左上角的file——而后Export to ZIP

登录codesandbox.io后只能创立50个我的项目，不登录能够创立有限个
咱们能够在codesandbox里在线写Vue的代码，不必任何本地的装置依赖