程序人生
咱们抉择了这个 IT 行业,天然心愿可能在这个行业走得更远。我置信没有任何一个人会甘于平庸,大家都心愿可能在本人所处的行业以及所处的畛域中有所建树,心愿能够实现本人的价值,以获取社会的认可。而如果要实现这个指标的话,咱们将要投入更多的工夫和精力,能力赢得更多的机会。在成长的过程中,不可避免的会踩一些坑、走一些弯路,那么有没有方法能够防止少踩一些坑、少走一些弯路呢?万幸的是,答案是有的。
站在伟人的肩膀上,咱们能够看得更远,约翰 · 雷西格公布了 jQuery 的第一个版本,从此让咱们进入了 jQuery 时代;尤雨溪发明了 Vue,使咱们正式迈入 Vue 的时代。这些领军者,让咱们可能看得更远,让咱们的工作和生存变得更加简略。所以这应该是所有前端开发者选用 Vue 的根本原因!
框架为什么会存在
这个世界上任何事物的存在,必然是解决了世界上的一些问题。同样的情理,框架为什么会存在呢?框架的存在也必然是解决了某一个或某一类的问题,这里引入一下 Vue 的作者尤雨溪说过的话:框架的存在是为了帮忙咱们应答复杂度。框架作为一个工具用来帮忙咱们应答一类简单的问题,我想这就是框架的定义了。
当然框架自身一样存在着复杂度,就如同咱们应用扳手去拧螺丝时,扳手就是框架,它是一个工具,这个工具自身一样有学习老本,只不过它的学习老本比拟低,咱们应用这个工具来去解决拧螺丝这样一个如果没有扳手会变得相当简单的问题,这和应用前端框架去解决在工作中遇到的一个简单我的项目的时候所经验的过程是一样的。
所以,很天然的就会在咱们应用的框架(工具——扳手)和想要去解决的问题(复杂度——拧螺丝)之间进行抉择,咱们会更趋向于应用一个简略的工具来去解决一个简单的问题,这就是框架存在的意义了。
所以咱们本能的心愿框架变得越来越简略,而它可能解决的问题越来越简单。万幸的是:这个时代正在依照咱们的心愿来倒退。
支流框架
目前探讨比拟多的前端框架次要有三个:
Angular React Vue
通过它们在 GitHub 的 Star 历史和 NPM 的下载趋势图来看一下。
Angular、React 和 Vue 的 GitHub Star 历史:
npm 的下载趋势图:
能够看到在 GitHub 下面,Vue 的数据回升最快,并且在 2018 年 6 月 28 日曾经超过了 React,成为了最受欢迎的前端框架。而在 npm 中,React 的数据遥遥领先,这得益于 React 弱小的社区力量,咱们无奈否定,React 社区作为以后最沉闷的前端社区,提供出了特地多优良的想法和理念,它们为 React 提供了弱小的生态反对,同时也让咱们在抉择周边框架的时候须要进行更多的抉择。
当然这三个框架都十分的优良,咱们不去探讨它们的优劣,咱们的抉择都只是基于咱们的取舍:咱们心愿工具足够简略,而它能够解决的问题却要足够简单。这就够了,不是吗?
Angular:Angular 冀望做的事件十分多,比如说它会蕴含着它本人的路由,这让咱们决定去应用 Angular 的时候,就必须要承受它的全副,这就使得学习老本变得更高,但同时抉择变得会更少,不过有时候抉择少了并非是一件好事,它能够让咱们更加专一。
React 与 Vue:React 与 Vue 一样都是专一只做界面,而其余的所有所有都会有各种配套的工具,比如说路由,或者状态管理工具,所以说应用它们的话你可能须要做更多的抉择,而这种形式则使得它们自身(React、Vue)的学习曲线绝对平缓。
从下面的剖析能够看出,Angular 提供了一个简单的工具,用于解决一整套简单的问题。而 React 与 Vue 则专一于解决一个特定的问题,而把其余的问题交给了它们的生态圈来解决,这样做的同时也会让咱们花更多的工夫来抉择适合的周边工具。
所以说这些框架各有优劣,并没有相对的谁好谁坏之分,咱们抉择什么样的工具,取决于咱们面对了什么样的问题。没有人会喜爱用大炮去打蚊子,也没有人会想到用苍蝇拍来打大象。咱们喜爱刚刚好,谋求事倍功半,如果你也是这么想的,那么至多咱们的底层观点是统一的。
Vue 的特点
通过了那么多的铺垫,总算到了本次课程内容的重点:Vue,它到底有什么魅力?为什么值得咱们破费工夫去学习?先来看一下 Vue 到底领有什么样的特点。
咱们会从以下 8 个方面来对 Vue 进行剖析:
- MVVM 框架
- 单页面应用程序
- 轻量化与易学习
- 渐进式与兼容性
- 视图组件化
- 虚构 DOM(Virtual DOM)
- 社区反对
- 将来的 Vue 走向
(1)MVVM 框架
所谓 MVVM 框架就是:Model-View-ViewModel,就像上面这样:
那么这个 MVVM 框架,应该怎么去了解呢?它的第一个 View,相当于页面中的 DOM,最初一个 Model 相当于数据源,就像上面这个样子:
其中,a 标签就是 DOM,data 对象就是数据源,这两者之间永远不会间接通信,它们所有的分割都是通过 ViewModel,也就是监控者来进行的。监控者会去负责检测数据的变动,而后把数据实时展现在页面中。例如,把 text 的内容更改为“Hello Vue”的话,那么 a 标签中展现的内容,也会主动变为“Hello Vue”。这样就不须要手动的操作 DOM,所有对 DOM 操作都会通过监控者来实现。如果以前写过简单的 DOM 操作的话(如 **.parent().parent().parent()…),就会发现这种形式带来的便当。
Vue 正是应用了这种 MVVM 的框架模式,并且通过 申明式渲染 和响应式数据绑定 的形式来帮忙咱们完全避免了对 DOM 的操作。
(2)单页面应用程序
单页面应用程序(SPA),个别指为:一个页面就是一个利用(或子利用)。随着技术的倒退,当初的前端网页早已不只局限于在浏览器上展现了,手机 App 上、微信公众号上都有了越来越多的展现机会。
那么如果把传统的多页面利用模式放入到咱们的手机下面会是什么样子呢?当进行页面跳转关上一个新的页面的时候,它会变成这样:
等的花儿都谢了 有没有?
而如果应用单页面的模式来开发的话,就不会呈现这样一种状况。因为咱们的整个利用就只有一个页面,当咱们的这一个单页被加载进来之后,就不会在进行对于页面的网络申请。Vue 配合生态圈中的 Vue-Router 就能够十分不便的开发简单的单页利用。
(3)轻量化与易学习
咱们晓得网页中引入的 JS 体积越大,那么加载所须要消耗的工夫就越长,反之体积越小,则越节省时间。所以咱们会更偏向于应用体积更小的 JS 文件,这也是为什么在生产版本会引入 .min 的 JS 的起因。上面是我从 Vue 官网的截图:
目前 Vue 的最新稳固版本为 2.5.16,从截图中能够看到 Vue 的生产版本只有 30.90KB 的大小,简直不会对咱们的网页加载速度产生影响。同时因为 Vue 只专一于视图层,独自的 Vue 就像一个库一样,所以使咱们的学习老本变得非常低。
(4)渐进式与兼容性
渐进式框架就是:我只做分内的事件,并且不会对你要求太多。
Vue 的外围库只关注视图层,不仅易于上手,还便于与第三方库或既有我的项目整合。
这是 Vue 官网下面的一句话,正如在下面所说的,Vue 只做界面,而把其余的所有都交给了它的周边生态来做解决,这就要求 Vue 必须要对其余的框架领有最大水平的兼容性。
例如,一开始只想做一个动态站,那么能够只引入 Vue 来去构建界面,过了一段时间,你想在网站上退出拜访网络的性能,那么你能够再引入 axios(Vue 官网举荐)或者其余的(哪怕是 jQuery)网络申请框架,而起初随着你的网站越做越大,你想要把你的网站变成一个大型的 Web 利用的时候,能够引入一些其余你须要的 JS 文件,如 Loadsh.js、Velocity.js 等。
(5)视图组件化
所谓视图组件化就是把咱们的网页拆分为一个个的组件,就像上面这样:
Vue 容许通过组件来去拼装一个页面,每个组件都是一个可复用的 Vue 实例,组件外面能够蕴含本人的数据,视图和代码逻辑。比如说:
CSDN 的这个个人资料模块,大家都曾经不生疏了吧,当咱们的 Web 利用中有多个页面都应用到这个个人资料模块的时候,就能够把它封装成一个组件,这个组件领有独自的代码逻辑、CSS 款式、数据等,在任何一个咱们须要应用到它的中央,就能够通过
<component-name></component-name>
Vue.component('component-name', {...});
这种形式来间接引入了。
(6)Virtual DOM
Virtual DOM 也就是虚构 DOM,大家晓得浏览器去解决 DOM 操作时,是存在性能问题的,这也是咱们在应用 jQuery 或者原生 JavaScript 来去频繁操作 DOM 进行数据渲染的时候,咱们的页面经常出现卡顿的起因。
而虚构 DOM 则是事后通过 JavaScript 的各种运算,把最终须要生成的 DOM 计算出来,并且进行优化,在计算实现之后才会将计算出的 DOM 放到咱们的 DOM 树中。因为这种操作的形式并没有进行实在的 DOM 操作,所以才会叫它虚构 DOM。
咱们在后面说过:
Vue 是通过 申明式渲染 和响应式数据绑定 的形式来帮忙咱们完全避免了对 DOM 的操作。
Vue 之所以能够完全避免对 DOM 的操作,就是因为 Vue 采纳了虚构 DOM 的形式,岂但防止了咱们对 DOM 的简单操作,并且大大的放慢了咱们利用的运行速度。
(7)来自社区的反对
尽管在寰球中 Vue 的社区并没有 React 社区那么的热闹,但得益于 Vue 的本土化身份(Vue 的作者为国人尤雨溪),再加上 Vue 自身的弱小,所以涌现出了特地多的国内社区,如 https://www.vue-js.com/、https://vuejs.com.cn/ 等。这种状况在其余的框架身上是没有呈现过的,这使得咱们在学习或者应用 Vue 的时候,能够取得更多的帮忙。
(8)将来 Vue 的走向
Vue 是由国人尤雨溪在 Google 工作的时候,为了不便本人的工作而开发进去的一个库,而在 Vue 被应用的过程中,忽然发现越来越多的人喜爱上了它。所以尤雨溪就进入了一个边工作、边保护的状态,在这种状况下 Vue 仍然迅速的倒退。
而当初尤雨溪曾经正式辞去了 Google 的工作,开始专职保护 Vue,同时退出进来的还有几十位优良的开发者,他们致力于把 Vue 打造为最受欢迎的前端框架。事实证明 Vue 的确在往越来越好的方向倒退了(从 Angular、React、Vue 的比照图中能够看出 Vue 的势头)。所以我感觉齐全不须要放心将来 Vue 的倒退,至多在没有新的颠覆性翻新进去之前,Vue 都会越做越好。