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

一时失言乱红尘 2021-12-13 05:02 389阅读 0赞

### 文章目录 ###

*  1. Web 开发模式
 *   *  1.1 传统开发模式
     *  1.2 MVC 开发模式
     *  1.3 Ajax 技术
     *  1.4 前后端分离模式
 *  2. 单页应用程序
 *  3. Node.js 运行环境
 *  4. Vue 全家桶

# 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，处理业务逻辑）两部分。

![MVC 设计模式][MVC]

## 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 的 CSDN 博客：[https://blog.csdn.net/FungLeo/article/details/77575077][https_blog.csdn.net_FungLeo_article_details_77575077]

**修订记录：**

<table> 
 <thead> 
  <tr> 
   <th>日期</th> 
   <th>版本号</th> 
   <th>作者</th> 
   <th>修订内容</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>2019-7-14</td> 
   <td>1.0</td> 
   <td>moonspirit</td> 
   <td>创建文档</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>2019-8-1</td> 
   <td>1.1</td> 
   <td>moonspirit</td> 
   <td>内容修订</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

[MVC]: /images/20211210/b4f0e688693e41af9fb92ffb02f11772.png
[Node.js]: https://nodejs.org/en/
[https_blog.csdn.net_FungLeo_article_details_77575077]: https://blog.csdn.net/FungLeo/article/details/77575077