前端开发之 Vue 框架的优势

​

01 引子

提起前端，很多同学第一时间想起的是不是 HTML，CSS 和 JavaScript 这三剑客呢？

确实，前端的基础部分离不开它们三个。

不过也正是因为它们是基础的部分，

所以有时候显得太过繁琐。

在这样的时代背景之下，

框架这一概念与体系应运而生。

所谓框架，

一般指用于简化网页设计的框架，

框架封装了一些功能，

比如 html 文档操作，

漂亮的各种控件（按钮，表单等等），

使用前端框架可以帮助快速地构建网站。

使用框架的一个最明显的变化就是：

代码量突然之间少了好多——

组件化正是前端框架里非常强大的功能之一，

它可以扩展你的 HTML，

封装可以重用的代码块，

比如你的轮播图、页面头部、页面底部等等。

下面便来介绍 Vue 框架。

02 Vue 的历史

2013 年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。2013 年 12 月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014.01.24，Vue 正式对外发布，版本号是 0.8.0。2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。2015.06.13，0.12.0，代号 Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从 Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

/* Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不前端培训仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 */

03 Vue 的优点

1、轻量级框架

只关注视图层,是一个构建数据的视图集合,大小只有几十 kbVue.js 通过简洁的 API 提供高效的数据绑定和灵活的组件系统这也就使得使用 Vue 十分快捷方便

2、视图,数据,结构分离

使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

3、双向数据绑定

也就是所谓的响应式数据绑定。这里的响应式是指 vue.js 会自动对页面中某些数据的变化做出同步的响应。vue.js 的实时性会自动响应数据的变化情况，并且根据在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行实时的修改。

4、虚拟 DOM

在传统开发中，用 JQuery 或者原生的 JS DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。而使用 Vue 可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化。由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。只有最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。

5、运行速度更快

相比较与 react 而言,同样都是操作虚拟 dom,就性能而言,vue 存在很大的优势

​