浅析Vue两个版本

109 阅读1分钟

Vue 两个版本介绍

vue分为两个版本,vue完整版跟运行时版(非完整版)

vue完整版:vue.js或者vue.min.js

vue完整版可以直接写在html中或者写在template

是因为完整版里面有编译器(compiler),可以把html代码识别成相应的节点

但是编译器比较复杂,代码体积比较大,比不完整版体积大大概30%左右

示例:

//main.js
console.log(window.Vue);
new Vue({
  el: "#app",
  data: {
    n: 0,
  },
});
//index.html
 <div id="app">
    {{n}}
  </div>

vue运行时版:vue.runtime.js或者vue.runtime.min.js

需要写在render函数里,用h来创建标签才行

render(h){

return h('div',this.n)

}

示例:要在html中显示,需要render进去,用h来创建

import Vue from "vue";
import App from "./App.vue";
​
Vue.config.productionTip = false;
​
new Vue({
  el: "#app",
  render: (h) => h(App),
});

可以使用Webpack的vue-loader,让写代码的时候写完整版的简单代码,打包之后转换成非完整版体积小的代码

Vue 两个版本区别

区别如下:

img

我们一般使用非完整版,然后配合vue文件和vue-loader

\