浅析Vue两个构建版本的区别

Vue 完整版 V.S. Vue 只包含运行时版

Vue 完整版

• cdn 引入文件名：vue.js, vue.min.js(生产环境)
• 同时包含编译器和运行时的版本
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是出去编译器的其它一切。

Vue 只包含运行时版（非完整版）

• cdn 引入文件名：vue.runtime.js, vue.runtime.min.js(生产环境)
• 非完整版不含编译器
• 体积相比完整版要小约 30%，所以应尽可能使用这个版本。
• webpack 引入默认使用非完整版，使用完整版需要自行配置 alias
• @vue/cli 引入默认使用非完整版。

深入理解两种区别

template和render用法

如果需要在客户端编译模板，比如传入一个字符串给template选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板，就需要加上编译器，即使用完整版：

// 需要编译器
new Vue({
    template: '<div>{{ hi }}</div>'
})

当使用vue-loader 或 vueify 的时候，*.vue文件内部的模板会在构建时预编译 JavaScript。所以在最终打好的包里不需要编译器，所以用非完整版即可。

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

最佳实践总结

总是使用非完整版，然后配合vue-loader和*.vue文件。

1. 保证用户体验，用户下载的 JS 文件体积更小。视图写在render函数里用h来创建标签。（h函数是 Vue 中的 createElement 方法）。
2. 保证开发体验，开发者可以直接在 vue 文件里写 HTML 标签，而不写 h函数。
3. vue-loader会在构建时把 vue 文件里的 HTML 转为 h函数。

方便的用 CodeSandbox 写 Vue

1. 进入：codesandbox

2. 点击 Vue 图标

3. 在线实时写 Vue 代码

4. 导出 zip 文件