Vue.js 学习笔记——基本概念

1. Web 开发模式

Web 是一个典型的基于客户端/服务器架构的网络应用，其开发的本质是处理客户端请求和服务端响应两件事。因此，我们可以很自然地将 Web 开发划分为前端和后端两部分，Web 开发模式的演进围绕前后端之间明确职责分工和降低耦合关联的主题展开。

1.1 传统开发模式

传统开发模式基于 JSP+Servlet 技术组合，主要交互形式是 HTML 页面模板。服务器接收客户端请求、执行业务逻辑、管理业务数据，最终生成页面模板，返回给客户端。客户端接收到页面模板后，注入 js 和 css，生成 dom 树，渲染页面并呈现给用户。

传统开发模式的主要特点是，页面模板由服务器吐出，客户端仅负责借助浏览器渲染页面。有时候，客户端也会注入一些 js 为页面的动态交互提供支持。

传统开发模式的开发流程如下：

1. 设计师绘制页面设计稿；
2. 前端工程师切成 html+css+js 静态页面（切图工）；
3. 后端工程师拿到静态页面，利用模板引擎将需要动态化的部分替换成后端模板语法（套页面），同时进行后端开发。

这种开发模式的前后端耦合度极高，哪怕页面出现一点点小的改变，也需要前后端工程师协调开发。同时，后端工程师不能把全部精力放在业务逻辑、数据操作等方面，必须和前端工程师一起处理各种兼容问题。项目开发效率不高，沟通繁琐。

1.2 MVC 开发模式

MVC 只改变了后端开发模式，对前端开发没有任何影响。在 MVC 中，模型（Model）负责管理业务数据并处理业务逻辑，视图（View）负责渲染页面，控制器（Controller）负责与用户交互。

模型（Model）部分的职责可以继续划分为数据接入层（DAO，管理业务数据）和服务层（Service，处理业务逻辑）两部分。

1.3 Ajax 技术

Ajax 是一种异步数据交换技术，通过前端页面与服务器端进行少量的数据交换，在无需重新加载整个页面的情况下，对局部页面进行异步数据更新。

Ajax 的出现改变了前后端交互方式，交互数据形式由整个 HTML 页面模板变为少量 XML/JSON 数据，为前后端分离创造了可能。

1.4 前后端分离模式

前后端分离模式下，服务器端从数据库读取数据，执行业务逻辑，直接吐给客户端。客户端接收到数据后，在本地渲染生成页面，呈现给用户。

相比于传统开发模式，服务器端不再提供页面模板，而是单纯提供客户端需要的数据，职责更加单一。在完全分离模式中，前后端完全通过 Ajax 交互，后端人员只需要设计和实现一系列接口（一般是 REST 风格的服务接口）。前端发生的所有事情，包括页面渲染、交互、样式和路由等都由其自身完成。在某些混合模式中，后端还会提供部分页面模板片段。

前后端分离模式的开发流程如下：

1. 设计师绘制页面设计稿；
2. 前端工程师和后端工程师以及其他技术人员约定项目开发接口规范；
3. 后端工程师按照约定接口规范开发相应接口；
4. 前端工程师开发页面，并对接后端接口（可能先期采用假接口）开发页面。

2. 单页应用程序

SPA（Single Page Application），即单页应用程序，在一个网站中，只有一个完整的 HTML 页面，通过 js 动态显示或隐藏组件，展示不同的内容。

SPA 的优点是，基于 Ajax 异步请求和锚点页内跳转，只进行局部页面更新，页面切换速度快。SPA 同时存在首页加载速度慢、SEO 效果差等问题。Vue.js 提供的服务器端渲染技术，可以解决这些问题。

URL 一般由以下部分组成：

• http:// 应用层协议
• www.xxxx.com 站点地址
• index.html 页面名称
• ?name=xxx&id=xxx 请求参数
• #login 页内锚点

其中，前四项发生任何改变，都会触发浏览器的跳转或刷新行为，并向服务器端发送请求。更改锚点区域，不会触发上述动作。SPA 就是利用锚点的这个特性实现页面路由的。

页面路由分为页内路由和页外路由两种方式：

• 页内路由：前端根据响应中的状态码，利用锚点机制进行页内跳转；
• 页外路由：前端根据响应中的跳转路径，利用 window.location.replace(newPath) 进行 URL 跳转。

SPA 的工作原理如下：

1. 浏览器解析 URL，向服务器端发送 HTTP 请求，加载指定页面；
2. 根据锚点进行页内路由，发送 Ajax 异步请求获取相关数据；
3. 加载数据到指定容器，显示内容。

3. Node.js 运行环境

Node.js 是一个基于 JavaScript 语言和 Chrome V8 引擎的开源 Web 服务器项目。它第一次将 JavaScript 引入后端服务器开发，使用事件驱动机制和异步 I/O 模型，提供轻量级、高性能的 Web 服务。

• JavaScript 提供天然的事件驱动机制，并且支持完善的函数式编程；
• Chrome V8 是谷歌开源的高性能 JavaScript 引擎，能够高效地运行 JavaScript。

在 Vue.js 开发中，Node.js 是 JavaScript 的运行环境。Node.js 无疑是一项后端技术，只能用于后端开发，而 Vue.js 是一个前端框架，不会直接使用后端技术。在前后端分离的开发模式中，二者井水不犯河水。

但是，在开发过程中，前端无法与实际的后端服务交互，只能找 Node.js 这样一个 “工具人” 代替。

前端工程经过打包，生成 html+css+js 系列文件，就可以脱离 Node.js 开发环境，部署到实际生产环境中。

4. Vue 全家桶

Vue 是一个为了实现前后端分离的设计理念，开发前端 SPA 项目，实现数据绑定、路由配置、项目编译打包等一系列工作的技术框架。Vue 不仅仅是 vue.js 一个文件，而是围绕 vue.js 配套的一系列的工具：

• vue.js 核心
• vue-cli vue 项目脚手架
• vuerouter2 路由组织工具
• webpack 项目打包以及编译工具
• nodejs 前端开发环境
• axios ajax 接口请求工具
• sass-loader 和 node-sass css 预处理。
• element 基于 vue 的后台组件库
• iview 基于 vue 的另一套后台组件库

参考资料：

• FungLeo 的 优快云 博客：https://blog.youkuaiyun.com/FungLeo/article/details/77575077

修订记录：

日期	版本号	作者	修订内容	备注
2019-7-14	1.0	moonspirit	创建文档
2019-8-1	1.1	moonspirit	内容修订