当前位置:首页>Vue.js>Vue.js教程>Vue是什么

Vue是什么

作者:微学网发布时间:2019-08-08 05:20:31

为什么要学习Vue.js

在过去的两年里,前端技术的变化太快了,Vue.js技术的使用越来越广泛,其各种讨论和使用教程都非常的多。

Vue.js无论是对于web项目开发、网站制作、app应用程序、小程序开发,都越来越受到人们的欢迎。它的便利性和易用性使你不得不考虑学习。如果你只是仿效传统的CMS开源建设网站,显然你的技术跟不上,如果你开发更多前端和后端分离项目,那么Vue.js将成为你当下的重要选择技术之一。

更多请参考:为什么要学习vue

Vue.js的创始人

Vue.js的创始人是:尤雨溪。

外文名 Evan You,毕业于上海复旦附中,获得Design&Technology硕士学位,曾任职于纽约Google Creative Lab,主要作品为Vue.js,丰富了mvvm的前端开发模式。

2012年初,36kr发表了一篇关于作者尤雨溪的文章,文章中说:“Evan希望能通过这个举动引起科技公司的注意,向他伸出橄榄枝”,还附加了作者尤雨溪的微博、Twitter和个人网站。

Vue.js的诞生背景

近年来,由于移动设备的普及和性能的提高,对移动web的需求急剧增加,产生了一种叫做webapp的东西,即移动网络应用。

他们的功能变得越来越复杂,他们的交互越来越酷,他们的功能和效果越来越接近本地应用程序。

这些webapp程序不仅和h5营销页面一样酷,而且具有复杂的交互作用,如点击、输入、下拉选择、视图切换等。在这样的业务需求下,我们仍然遵循PC终端的开发方案,这必然是不恰当的。

在PC端,我们使用<a>链接来跳转页面,但在移动端,拿就麻烦了,很可能跳转的过程中白屏,加载时间过长,这个时候只能等…..2秒,6秒,10秒,使用<a>标签切换视图对使用者来说非常不友好。

此外,在接收用户输入时,可能会及时更新视图。例如,当用户输入不同的内容时,页面将相应地更新,单击不同的选项将显示不同的状态和交互效果。一旦这种交互变得多了,手动操作这些元素就更加复杂和难以维护了。

在这种情况下,为了克服webapp在经验和开发上的不足,前端mvvvm框架vue.js应运而生。

Vue.js的开发初衷

作者原话:做 Vue.js的初衷很单纯,不是为了赚大钱,不是为了成为大神,也不是因为我发现了什么不得了的创新点。我只是想做一个我自己会喜欢的框架。很巧,我把我想要的东西做出来以后,也有很多其他人喜欢,所以用户越来越多。我从没说过,也不认为Vue.js比所有其他框架都好(我一直的观点都是开发者偏好的多样性使得多框架/语言的共存有益无害,甚至是必要的

什么是Vue.js

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。

Vue.js 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

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

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

Vue.js 通过 Api 来进行统一性的管理,可以让整个团队的代码都用统一的风格和方法标准去运作,而且对组件系统也有强大的支持,在封装组件时通过 Props 和Event 两个标准性的原则去调用,可以让开发更加得心应手。

Vue.js的特点

MVVM 框架

所谓 MVVM 框架就是:Model-View-ViewModel,就像下面这样:
mvvm框架介绍

那么这个 MVVM 框架,应该怎么去理解呢?它的第一个 View,相当于页面中的 DOM,最后一个 Model 相当于数据源,就像下面这个样子:

<a href='#'>{{text}}</a>

<script>
  var data= { text : '这里是一个文本' }
</script>

其中,a 标签就是 DOM,data 对象就是数据源,这两者之间永远不会直接通信,它们所有的联系都是通过ViewModel,也就是监控者来进行的。

监控者会去负责检测数据的变化,然后把数据实时展示在页面中。例如,把 text 的内容更改为 “Hello Vue”的话,那么 a 标签中展示的内容,也会自动变为 “Hello Vue”。这样就不需要手动的操作 DOM,所有对 DOM操作都会通过监控者来完成。

如果以前写过复杂的 DOM 操作的话(如xxx.parent().parent().parent()…),就会发现这种方式带来的便利。

Vue 正是使用了这种 MVVM 的框架形式,并且通过 声明式渲染响应式数据绑定 的方式来帮助我们完全避免了对 DOM 的操作。

单页面应用程序

单页面应用程序(SPA),一般指为:一个页面就是一个应用(或子应用)。

随着技术的发展,现在的前端网页早已不只局限于在浏览器上展示了,手机 App上、微信公众号上都有了越来越多的展示机会。

那么如果把传统的多页面应用形式放入到我们的手机上面会是什么样子呢?当进行页面跳转打开一个新的页面的时候,就会白屏等待,可能网络不好,时间还会比较长。

而如果使用单页面的形式来开发的话,就不会出现这样一种情况。因为我们的整个应用就只有一个页面,当我们的这一个单页被加载进来之后,就不会在进行关于页面的网络请求。Vue
配合生态圈中的 Vue-Router 就可以非常方便的开发复杂的单页应用。

轻量化与易学习

我们知道网页中引入的 JS 体积越大,那么加载所需要耗费的时间就越长,反之体积越小,则越节省时间。

所以我们会更倾向于使用体积更小的 JS文件,这也是为什么在生产版本会引入 .min 的 JS 的原因。

下面是我从 Vue 官网的截图:
轻量级的vue.js

目前 Vue 的最新稳定版本为 2.6.10,从截图中可以看到 Vue 的生产版本只有 30KB的大小,几乎不会对我们的网页加载速度产生影响。

同时因为 Vue 只专注于视图层,单独的 Vue 就像一个库一样,所以使我们的学习成本变得非常低。

渐进式与兼容性

渐进式框架就是:我只做分内的事情,并且不会对你要求太多。

Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。

这是 Vue 官网上面的一句话,正如在上面所说的,Vue 只做界面,而把其他的一切都交给了它的周边生态来做处理,这就要求 Vue必须要对其他的框架拥有最大程度的兼容性。

例如,一开始只想做一个静态站,那么可以只引入 Vue 来去构建界面,过了一段时间,你想在网站上加入访问网络的功能,那么你可以再引入 axios(Vue官方推荐) 或者其他的(哪怕是 jQuery)网络请求框架,而后来随着你的网站越做越大,你想要把你的网站变成一个大型的 Web应用的时候,可以引入一些其他你需要的 JS 文件,如 Loadsh.js、Velocity.js 等。

视图组件化

所谓视图组件化就是把我们的网页拆分为一个个的组件,就像下面这样:
vue.js视图组件化

Vue 允许通过组件来去拼装一个页面,每个组件都是一个可复用的 Vue 实例,组件里面可以包含自己的数据,视图和代码逻辑。

虚拟 DOM(Virtual DOM)

Virtual DOM 也就是虚拟 DOM,大家知道浏览器去处理 DOM 操作时,是存在性能问题的,这也是我们在使用 jQuery 或者原生JavaScript 来去频繁操作 DOM 进行数据渲染的时候,我们的页面经常出现卡顿的原因。

而虚拟 DOM 则是预先通过 JavaScript 的各种运算,把最终需要生成的 DOM 计算出来,并且进行优化,在计算完成之后才会将计算出的 DOM放到我们的 DOM 树中。由于这种操作的方式并没有进行真实的 DOM 操作,所以才会叫它虚拟 DOM。

我们在前面说过:

Vue 是通过 声明式渲染响应式数据绑定 的方式来帮助我们完全避免了对 DOM 的操作。

Vue 之所以可以完全避免对 DOM 的操作,就是因为 Vue 采用了虚拟 DOM 的方式,不但避免了我们对 DOM的复杂操作,并且大大的加快了我们应用的运行速度。

社区支持

虽然在全球中 Vue 的社区并没有 React 社区那么的繁华,但得益于 Vue 的本土化身份(Vue 的作者为国人尤雨溪),再加上 Vue 本身的强大,所以涌现出了特别多的国内社区。这种情况在其他的框架身上是没有出现过的,这使得我们在学习或者使用 Vue 的时候,可以获得更多的帮助。

未来的 Vue 走向

Vue是中国本土的尤雨溪开发的一个项目,尤雨溪原本是在谷歌工作的,为了方便自己的工作写了Vue这个库,在使用Vue的过程中,突然发现越来越多的人喜欢它。所以尤雨溪就进入了一个边工作、边维护的状态,在这种情况下 Vue 依然迅速的发展。

现在,尤雨溪正式辞去谷歌的工作,开始全职维护Vue,同时加入了数十位致力于使Vue成为最受欢迎的前端框架的优秀开发人员。

结果表明,Vue正朝着更好的方向发展(从 Angular、React、Vue 的比较可以看出Vue的强劲发展趋势)。

所以我不认为有必要担心Vue的未来发展,至少在没有新的颠覆性创新之前,Vue会做得越来越好。