深入理解 Vue 不同构建版本的区别

您所在的位置：网站首页 › 戴森v10animal+与各个版本的区别 › 深入理解 Vue 不同构建版本的区别

深入理解 Vue 不同构建版本的区别

2024-07-14 12:35| 来源: 网络整理| 查看: 265

1、Vue 的两个不同版本的介绍

2、运行时+编译器 vs 只包含运行时

3、template 和 render() 的使用区别

4、两种不同的构建版本的具体使用

5、用 codesandbox.io 写 Vue 代码

1、Vue 的两个不同版本的介绍

首先你要了解如何创建一个 Vue 项目，如果你还不熟悉的话，可以移步到这里：传送门。创建 Vue 项目的过程中会涉及到 Vue 两个不同版本的选择：（1）完整版：vue.js、（2）只包含运行时版：vue.runtime.js 下面说一下它们之间的差异：

完整版：同时包含编译器和运行时的版本（compiler + runtime）。编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码（compiler）。运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切（runtime）。 Vue 完整版Vue非完整版描述特点有 compiler 编译器没有 compiler 编译器compiler 占 40% 体积视图写在 HTML 文件或 template 选项中写在 render 函数里，用 h 函数来创建标签h 是尤雨溪写好传给 render 的cdn 引入vue.jsvue.runtime.js文件名不同，生成环境后缀为 .min.jswebpack 引入需要配置 alias默认使用此版别问，尤雨溪配置的@vue/cli 引入需要额外配置默认使用此版别问，尤雨溪、蒋豪群配置的

推荐使用 vue.runtime.js 非完整版，然后配合 vue-loader 和 vue 文件思路，这样可以保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。而且可以保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数，多余的工作让 loader 做，vue-loader 把 vue 文件里的 HTML 转为 h 函数。

2、运行时+编译器 vs 只包含运行时

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

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

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。

因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名，详情移步：传送门

3、template 和 render() 的使用区别

在 Vue 完整版 vue.js 下可以使用 template 选项，因为其内置 compiler 编译器，可以将 template 字符串编译成 h 函数，从而达到直接从 HTML 渲染视图的效果。如果是在 Vue 非完整版 vue.runtime.js 下就只能使用 render 的 h 函数，通过 JS 构建的方法来达到渲染视图的效果。

//完整版 - 需要 compiler 编译器 - 编译 template new Vue({ //这个vue实例封装了一些东西，类似jQuery封装的 return api el:'#app', //el代表渲染挂在节点，会被替换，同$mount('#app') //涉及到 SEO 友好、服务端渲染 data:{ num:0 } //完整版支持从html中获取视图 template: '{{ num }}' //template内容可以写在html文件中，完整版都支持 }) //运行时版 - 不需要 compiler 编译器 - 只能使用 h 函数 new Vue({ //这个vue实例封装了一些东西，类似jQuery封装的 return api render (h) { //不支持template选项或从html中获取视图 return h('div', this.num) //可以将 h 函数类别成 createElement() } })

补充，运行时版通过 render 和 h 函数来创建视图，看似麻烦，但是这种方式是比较提倡的，这也就是为什么在使用 webpack 引入或 @vue/cli 引入时默认使用此版本，那么具体原因是什么呢？

我们知道完整版使用运行时 vue.runtime.js + 编译器 compiler 组合的形式，支持直接将写在 template 或 html 文件中的字符串编译成 dom 节点，非完整版只有运行时 vue.runtime.js，不支持上述编译，但实际上非完整版有一个预编译的 loader 加载器，使用 vue.runtime.js 非完整版，然后配合 vue-loader 可以将写在 vue 文件中的 HTML 标签转义为 h 函数，实现预编译的功能。

使用 vue.runtime.js 非完整版配合 vue-loader 可以保证用户体验，用户下载的 JS 文件体积更小，但只支持 h 函数。而且可以保证开发体验，开发者可直接在 vue 文件里写 HTML 标签，而不写 h 函数，多余的工作让 loader 做，vue-loader 把 vue 文件里的 HTML 转为 h 函数。

4、两种不同的构建版本的具体使用

现在我们分别使用 Vue 两种不同版本的构建工具实现一个点击按钮数字加一的功能，来具体看一下两种版本的实现方式：

（1）使用完整版（vue.runtime.js + compiler）支持将 template 选项或 html 文件中的代码直接编译成页面的 dom 节点。

var app = new Vue({ el: "#app", template: `{{ num }} +1`, data: { number: 0 }, methods: { incremente() { this.num ++; } } });

（2）仅使用运行时版（vue.runtime.js ）可以实现同样的效果，但是项目体积会更小，但是这对开发人员不友好。

两种方式的优缺点：第一种完整版的方式对开发人员友好，html 可以直接写到 template 或 html 文件中，完整版可以通过编译器直接将其渲染成页面给上的 dom 节点，但是较运行时版体积较大。第二种运行时版的方式对开发人员不友好，但是项目体积较少。

为应对上述问题，可以将运行时版结合 vue-loader + *vue文件的方式，可以将写在 vue 文件中的 html 预先转化为 h 函数的形式，这样即可以满足项目体积小用户体验好，又可以满足开发人员直接写 html 的两种需求，完美！

5、用 codesandbox.io 写 Vue 代码

如果你需要在新的环境，或在其他接触不到你自己电脑的环境下开发，推荐使用 CodeSandBox 进行在线开发。

CodeSandbox 是一个为 Web 应用程序开发而构建的在线编辑器，这个网站内置了多种 Web 开发框架的编译及运行配置，使得开发人员不需要进行繁琐的项目配置就可以着手进行开发工作，从而更好的专注于编写代码。CodeSandbox 仿佛就是一个在线的 webstorm 编译器，并且还给你设置好了所有开发前的准备配置，它还支持以 zip 的形式导出你的项目，赶快去试试吧 ~

【本文地址】

深入理解 Vue 不同构建版本的区别

深入理解 Vue 不同构建版本的区别

今日新闻

推荐新闻