怎么产生vue文件_Vue的完整版与运行时版到底有啥区别-CSDN博客

本文链接：https://blog.csdn.net/weixin_31265041/article/details/113708513

https://cn.vuejs.org/v2/guide/installation.htmlcn.vuejs.org

Vue的官网提供了多个版本的下载，

分为完整版vue.min.js 和运行时版 vue.runtime.min.js（非完整版）

它们的主要区别其实在上面贴的Vue的官方文档里已经描述的很清楚了，在这里我就仅仅总结一下自己学习时的收获，防遗忘。

-----

让我们从一个小目标，小例子着手：

让网页显示一个数字，旁边有一个按钮，点+1就可以加1。

操作如下：

1.index.html文件里加上一句话 <div id="app"> {{n}}</div>

2.App.vue里写一下

<template>
 <div id="app">
    {{ n }}
 <button @click="add">+1</button>
 </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
 name: "app",
 data() { 
 return {
 n: 0,
    };
  },
 methods: {
 add() {
 this.n += 1;
    },
  },
};
</script>

终端运行yarn serve然后点击打开网页发现这个小功能可以正常运行，打开main.js并看到代码是这样的：

new Vue({  
 render:h=>h(App),
 }).$mount('#app')

但这个实例是怎么创建的呢？

我们把上面三行代码删掉，写下:

new Vue({ el:"#app"})  //对这个div进行MVC的封装

发现网页端报错：你正在使用的是runtimeonly版本。

问题来了，什么是runtimeonly版本，运行时有什么区别？？

我们进入bootcdn，在bootcdn里搜索Vue ，

https://www.bootcdn.cn/vue/www.bootcdn.cn

把完整版的script，后缀为vue.min.js导入index.html文件，

在main.js里写上如下代码：

new Vue({
 el: '#app' ,        //  创建一个Vue实例，对这个div进行mvc的封装， 给n传个0
 template:`<div>{{n}}</div>`,
 data:{
 n:0
  }
})

发现网页端能正常显示0,运行正常。

现在导入非完整版的script，把完整版的script注释掉，其他不变，发现网页端空白，没有0。

得出结论：非完整版不支持从html文件里得到{{n}} 产生视图，而完整版则支持这样操作从html显示东西。

那我们想要非完整版正常显示的话，就要写下如下代码（别忘了把script切换回来）：

new Vue({
 el: "#app",
 render(createElement) {
 const h = createElement;
 return h("div", [this.n, h("button", { on: { click: this.add } }, "+1")]);
  },
 data: { n: 0 },
 methods: {
 add() {
 this.n += 1;
    },
  },
});

这种方法就是写在render函数里面，然后用h来创建标签（h可改成其它的，但一般都用h），看起来非常的麻烦，但其实它也有自己的好处。

首先是体积小：在完整版里的内部是有编译器compiler的，非完整版没有，编译器本身复杂并且占用代码体积，在Vue官网里说到非完整版要比完整版小30%。

说到编译器，编译器的作用可以把一系列如占位符，逻辑循环等复杂的语句变成DOM节点，而在不完整版是没有编译器的，所有不完整版里是没有办法把HTML变成节点，那怎么办呢？---通过Webpack的vue loader

所有完整版就是体积大，功能强。

非完整版就是体积小，功能弱，但通过webpack可以解决

具体的两种区别见下表：