vue.js介绍及vue.js优缺点

分手后的思念是犯贱 2021-09-16 17:32 230阅读 0赞

**什么是vue.js**

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

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

**什么是渐进式框架**

使用vue，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；  
还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念。  
也可以函数式，都可以。它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。你不必一开始就用Vue所有的全家桶，根据场景，官方提供了方便的框架供你使用。

使用历程：

form表单验证==》整个页面的dom 用Vue 来管理（用数据驱动DOM的变化）==》webpack vue-router控制路由，用于一整套前端开发的工程的构建==》熟悉组件之间的交流来处理数据交流和后端接口==》大型项目

从最初的只因多看你一眼而用了前端js库，一直到最后的大型项目决方案。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_27_color_FFFFFF_t_70][]

如上图，从起步开始一步一步向前，这就是所谓的渐进式。

具体相关内容大家可参照vue.js官网：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]

下面还是具体来介绍一下vue.js的优缺点：

**优点**

**（1）双向数据绑定**  
也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。

也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

**（2）组件化开发**

在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

**（3）Virtual DOM**

现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

**（4）轻量高效**

*Vue.js*通过简洁的API提供高效的数据绑定和灵活的组件系统

**其他优点：**

**（1）动画系统**

Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。

[Link 1]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Link 2]: https://github.com/vuejs/awesome-vue#libraries--plugins
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzQyNzIw_size_27_color_FFFFFF_t_70]: /images/20210813/cfa861d467614ca3a2842360e2387368.png
[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/