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可以解决
具体的两种区别见下表:
webpack配置alias比较繁琐,此处略去。默认使用非完整版。
总结一下:
最佳实践∶ 总是使用非完整版,然后配合 vue-loader和vue 文件
思路 :
1.保证用户体验,用户下载的 JS文件体积更小,但只支持h函数;
2.保证开发体验,开发者可直接在 vue 文件里写HTML 标签,而不写h函数;
3.脏话让loader做,vue-loader把vue 文件里的HTML转为h函数, 真聪明有没有,这就是工程师干的事 !