1.两个版本对应的文件名
vue.js(完整版)
vue.runtime.js(非完整版)
1.1两个版本的区别
| 标题 | Vue完整版 | Vue非完整版 | 评价 |
|---|
| 特点 | 有compiler | 没有compiler | compiler占40%的体积 |
| 视图 | 写在HTML里或者写在template选项里 | 写在render函数里,用h(任意名字)来创建标签 | h是尤雨溪写好传给render的 |
| cdn引入 | vue.js | vue.runtime.js | 文件名不同,生产环境后缀为.min.js |
| webpack引入 | 需要配置alias | 默认此版 | 尤雨溪配置的 |
| @vue/cli引入 | 需要额外配置 | 默认此版 | 尤雨溪和蒋豪群配置 |
- 完整版里由编译器
compiler,有占位符或者其他比较复杂的vue语句时,可以通过分析DOM结点来修改,但是代码体积会比非完整版的大30%。可以从HTML和template直接得到视图,功能更强
- 非完整版里没有编译器
compiler,体积更小,功能更弱。可以通过webpack里的vue-loader来render翻译,如将html变成h(div,this.n)
1.2最好的使用方法
- 总是使用非完整版
- 并且配合使用
vue-loader和vue文件
1.3思路
- 保证用户体验,用户下载的
js件体积更小,但只支持h函数
- 保证开发体验,开发者可直接在
vue文件里写HTML标签,而不写h函数
- 那么
h函数到底谁来写?
vue-loader会把vue文件里的HTML转化成h函数
2.template和render怎么用
Template可以直接写在html和js上,如:
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
render函数接收一个参数h,这个参数时vue传的,用这个参数去创建实例
render(h){
return h('div',[this.n,h('on:{click:this.add}','+1')])
}
3.如何用codesandbox.io写Vue代码


