- Vue.js企业开发实战
- 千锋教育高教产品研发部编著
- 1873字
- 2022-07-28 19:42:40
基础知识篇
第1章 Vue基础入门
1.1 Vue概述
在互联网技术的蛮荒时代,前后端开发的界限还不是很清晰,所有的工作都由后端程序员完成。随着互联网的发展,前端所负责的业务逻辑不断复杂化,前端开发岗位也逐渐被分化并独立出来专注于网页的样式制作。近几年,前端工程化这个概念被广泛地提及和讨论,在互联网高速发展的今天,前端工程师可以说撑起了互联网应用的“半壁江山”。
前端开发从最初的“切图”发展到现在各式各样的前端框架,目前最流行的三大框架:Vue.js、React.js、Angular.js,其中Vue以其简单易学、性能优越、渐进式等特性,在三大框架中脱颖而出。截至2019年3月,Vue在GitHub上的星数已经超过其他两个框架,成为三大框架中最热门的框架。
1.1.1 MVC到MVVM的演化历程
在学习Vue之前,我们先来了解一下常见的软件设计模式。
1.MVC模式
模型-视图-控制器(Mode-lView-Controller,MVC)模式是一种经典的软件设计模式。在软件技术发展之初,MVC模式被应用于桌面应用程序中,随着PHP、JSP等脚本语言的诞生,MVC模式又被应用于早期的Web架构中,逐渐成为Web 1.0时代的主流模式。
MVC模式的特点是使用业务逻辑、模型数据、界面展示三部分相分离的方式来组织代码结构,在MVC设计模式中各部分的功能如下。
Model层对要处理的业务逻辑和数据进行操作,并且接收View层请求的数据,然后对数据进行计算、校验、处理,最后返回最终的处理结果,整个过程不直接与用户产生交互;
View层是用户能够看到的并且可以与之交互的客户端界面,例如桌面应用中的图形界面,以及Web应用中的浏览器渲染的网页等;
Controller层相当于Model层和View层的桥梁,负责收集用户输入的数据,从对应的模型获取数据并返回给相应的视图,以此完成交互请求,使模型和视图保持一致,如图1.1所示。
MVC模式实现了Model层和View层的代码分离,Model层专注于数据管理,View层则专注于数据显示,Controller层在二者之间架起了一座桥梁。将业务逻辑聚集到一个部件中,在更新不同的界面或用户产生交互时,即使访问同样的数据,也会得到不同的页面呈现,由于无须重写业务逻辑的代码,而且减少了Model层的冗余代码,使得Model层和 View层更加灵活和易于维护。由于MVC中3个模块的相互独立,改变任意一个模块都不会对另外两个模块造成影响,从而对Model层和View层进行了解耦。
图1.1 MVC模式
伴随技术的不断迭代,MVC模式逐渐演化出更多的形态。无论演化的是哪种版本及形态,都离不开MVC模式的本质。所以,在某些文章中就将这种衍生版本统称为“MV *模式”,其中,MVVM模式就是典型代表之一。
2.MVVM模式
模型-视图-视图模型(Model-View-ViewModel,MVVM)模式是MVC的衍生版本,其主要目的是分离View层和Model层。模型指的是服务器端传递的数据,视图指的是浏览器中渲染的网页,视图模型是MVVM模式的核心,连接了View层和Model层。在MVVM模式中,主要通过两个方面实现数据的双向绑定:一方面通过数据绑定将后端传递的数据转化为用户可以看到的页面;另一方面通过DOM事件的监听,将用户看到的页面转换为后端数据,如图1.2所示。
图1.2 MVVM模式
MVVM模式是对View(视图)和Model(模型)的解耦,在接收到用户的请求后,ViewModel获取Model层响应的数据,并通过数据绑定将相应的View层重新渲染,即Model层只需传入一个数据就可以实现View层的同步更新,从而实现View层和Model层之间的松散耦合。
Vue就是基于MVVM模式设计的一套框架,在Vue中,JavaScript的数据相当于Model,例如对象、数组等,HTML页面相当于View,而Vue实例化对象相当于ViewModel。
1.1.2 Vue简介
Vue是一套轻量级MVVM框架,与React和Angular有所不同,Vue的核心库只关注View层,并且提供了简单的API和容易上手的操作机制,例如双向数据绑定、组件复用等,此外还很容易与第三方库进行整合。Vue的渐进式和自底向上逐层应用的设计,使其成为十分优秀的前端框架。下面我们来解释一下什么是渐进式框架和自底向上逐层应用。
渐进式框架就是在项目开发中只需关注需要的功能特性,而不需要的部分功能可以先忽略,Vue不强求你一次性接受并使用它的全部功能特性。
自底向上设计是一种设计程序的过程和方法,我们可以将其理解为先编写项目的基础代码部分,然后逐步扩大规模、补充和升级核心功能。
1.1.3 虚拟DOM与Diff算法
在传统的开发模式中,原生JavaScript操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍。例如,在一次操作中需要更新10个DOM节点,当浏览器收到第一个DOM更新请求后并不知道后面还有9个更新请求,所以会马上执行渲染流程,直到最终执行10次。但是在每次重新更新时,前面更新DOM的操作都会变成无用功,浏览器在计算DOM节点时白白浪费了性能,如果频繁操作,还会产生页面卡顿,从而影响用户体验。
虚拟DOM的设计就是为了解决浏览器性能问题,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次操作更新的Diff内容保存到本地的一个JS对象中,最终将这个JS对象一次性attach到DOM树上,再进行后续操作,避免大量无谓的计算量。