本文的知识点：
- Vue各版本对比
- 编码实践对比
1. Vue完整版和运行时版本不同
1.1 UMD各版本
| 版本名称 | 对应vue.js | 区别 |
|---|---|---|
| 完整版 | vue.js | 运行时版本+编译器+开发环境 |
| 只包含运行时版本 | vue.runtime.js | 运行时版本+开发环境 |
| 完整版生产环境 | vue.min.js | 运行时版本+编译器+生产环境 |
| 只包含运行时版本生产环境 | vue.runtime.min.js | 运行时版本+生产环境 |
1.2 完整版和运行时版本对比
先抛出来结论：完整版和运行版本相对比就是多了一个编译器，如何理解呢？
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：
// 完整版本写的代码
new Vue({
template: '<div>{{ hi }}</div>'
})
// 运行时版本写出来的代码
new Vue({
render (h) {
return h('div', this.hi)
}
})
因为如果没有编译器的话，vue和html语法之间就没有桥梁接通，所以完整版就包含了编译器。
编译器的作用就是把上述代码中template的代码翻译成为render函数。
但是编译器有一个问题就是体积很大，完整版本要比非完整版本大43%左右。
我们发现：运行时版本对于我们开发人员写起来效率很低(语法及其难以描述)。
这就导致个问题：完整版本对于用户来说文件太大，但是运行时版本对于开发人员来说开发效率太低。
如何找到一个对开发人员和用户都友好的方式呢？
使用
vue-loader或vueify的时候，*.vue文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
具体配置看官方文档描述。
1.3 开发版本和生产环境版本对比
开发版本的源码内部变量具有语义，并且还会有注释，所以开发版本在开发的时候信息全面。
//开发版本部分代码预览
/*!
* Vue.js v2.6.9
* (c) 2014-2019 Evan You
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
/* */
var emptyObject = Object.freeze({});
// These helpers produce better VM code in JS engines due to their
// explicitness and function inlining.
function isUndef (v) {
return v === undefined || v === null
}
function isDef (v) {
return v !== undefined && v !== null
}
function isTrue (v) {
return v === true
}
function isFalse (v) {
return v === false
}
...
生产环境版本的源码变量都用尽量少的字符，比如page就会用p来代替，同时少了注释信息，这样一来文件体积就被压缩，适合在生产环境中使用。
//生产版本部分代码预览
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Vue=e()}(this,function(){"use strict";var t=Object.freeze({});function e(t){return null==t}function n(t){return null!=t}function r(t){return!0===t}function o(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function i(t){return null!==t&&"object"==typeof t}var a=Object.prototype.toString;function s(t){return"[object Object]"===a.call(t)}function c(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function u(t){return n(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function l(t){return null==t?"":Array.isArray(t)||s(t)&&t.toString===a?JSON.stringify(t,null,2):String(t)}function f(t){var e=parseFloat(t);return isNaN(e)?t:e}function p(t,e){for(var
2. 编码对比
2.1 直接<script>引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
{{ message }}
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="./main.js"></script>
</html>
console.log(window.Vue)
注：可以看到我们已经引入了
Vue并且这个Vue实例是挂在window下的
2.2 引入完整版Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
{{ message }}
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="./main.js"></script>
</html>
console.log(window.Vue)
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
正常效果：
2.3 引入运行时版本Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
{{ message }}
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.js"></script>
<script src="./main.js"></script>
</html>
console.log(window.Vue)
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
render(h) {
return h('div', this.message)
}
})
正常效果：
如果我们使用的是完整版的方式开发会出现这样的情况：
代码：
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
