初探Vue vue.js - 锐客网

Vue的两个版本 Vue主要有两个版本，分别是完整版和非完整版
完整版是vue.js / vue.min.js
非完整版是vue.runtime.js / vue.runtime.min.js
(vue.js是多了一些注释，min.js是去掉了注释，压缩了代码)
完整版完整版同时包括编译器(compiler) 和运行时(runtime)
【初探Vue】编译器的功能是将模板字符串编译为 JavaScript 渲染函数(render函数)的代码
运行时的功能包括创建 Vue 实例、渲染并处理虚拟 DOM 等，它包括除了编译器的其他所有功能
只包含运行时版只包含运行时版就只有运行时，没有编译器
两个版本的区别

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

那究竟应该使用哪一个版本呢？
最佳实践：永远用非完整版，然后配合vue-loader和vue文件
原因

对于用户来说，非完整版下载的js文件体积小，用户体验好，但只支持h函数
保证开发体验，只能写h函数的话，开发体验不好，如果有compiler, 开发者就能在vue文件里写更直观的HTML标签和template, 所以我们需要一个compiler
vue-loader就可以引入compiler, 把vue文件里的HTML标签和template 会在构建时预编译成 h函数，这样用户和开发者都高兴

template 和 render 的用法

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

template标签和JS里的template

//vue文件中的template标签 //js中的template template : `{{n}} `

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项目