浅谈VUE和单页应用

 

1为什么使用VUE去构建一个项目？

 

1.1VUE的特性

首先选择VUE去构建一个项目，主要因为VUE的轻便性以及其所具有的可渐进性，即我们可以现用原生HTML，CSS和JS去构建一个网页，然后再使用VUE模块化的思想进行分解代码，将不同功能的代码进行分组，整个页面由一个模块进行管理，其被小模块所填充，子模块对父模块的功能进行细分，从而达到颗粒度大小的控制，为VUE之后的数据管理进行铺垫。所以说VUE对于初学者来说简单，甚至可以在无基础的情况的进行学习。

1.2VUE作者所付出的巨大贡献

而且VUE作者尤大对于VUE框架的维护更新，让VUE逐渐获得了其他框架的优点，比如React里的虚拟DOM，JSX，HOOKS再到VUE3使用Proxy代理替代Object.defineproperty修改了之前使用部分数组方法无法被监测，对象新增属性无法收集依赖到观察者的缺点，可以看出尤雨溪对于VUE框架的用心程度。为了中小型开发者的使用做出了巨大贡献。

 

2为什么使用单页应用去构建一个项目？

 

2.1网页渲染原理

之前介绍了VUE.JS的优点，即可渐进性，模块化以及数据响应式。它既不像React一样需要查找Github上的资源库去完善功能，也不用像JQuery一样一直操作DOM元素来频繁调用方法。这样的简洁性造就了VUE与生俱来适合单页应用。虽然多页应用的使用很多，比如传统开发的应用网站（其路由由后端编写）

虽然具有首屏加载块，SEO效果好等优点，但页面切换慢却成为了有待解决的问题。面对快节奏生活以及用户对于快捷使用的需求页面切换速度成为了如今网页开发的重中之重。

首先我们先了解一下从输入URL地址到网页加载的所有细节。

当用户输入URL地址点击跳转的过程中，浏览器需要通过URL找到域名服务器IP地址，浏览器首先从缓存中逐层查找是否含有其URL所具有的域名地址（从本地缓存一直查找到DNS缓存），

得到服务器地址之后，浏览器向服务端IP地址发送HTTP请求建立TCP链接。服务器解析请求返回HTML文件给浏览器，客户端首先解析HTML文件生成DOM树，然后解析CSS文件与DOM树组合成Render渲染树，最后构建布局树（含有元素定位和布局信息）。最后发出异步请求下载到外部所需资源。最后通过GPU渲染像素，得到最终显示屏画面呈现给用户网站信息。

2.2多页应用和单页应用的不同

其中使用多页应用虽然可以快速得到多页中的单页面HTML文件，但是当发生跳转时浏览器会重新发出HTTP请求进行其他页面的访问。即URL跳转引发了浏览器与服务端的再一次链接以及HTML文件的解析以及渲染整个过程。所有会消耗更多的网络资源到跳转页面功能里面。但使用VUE构建单页应用时，VUE-router会感知页面URL的跳转，使用JS对当前页面进行清楚，跳转页面渲染到视图上。URL虽然变化但是不会发生浏览器和服务端重新建立网络链接，直接使用前端技术对网页跳转进行反馈。不更多地消耗网络资源去完成跳转功能，即使用单个页面进行一个项目的呈现。单页应用使用清除旧组件使用新组件的方式代替之前跳转地址到挂载页面的网络加载过程。这就是其适合用于高反馈项目的理由。

2.3但其实单页应用也不是尽善尽美

因为SEO（搜索引擎脚本）只能识别HTML文件而无法识别复杂JS文件，会导致单页应用的部分内容无法被搜索检测到。导致在SEO中发挥不佳。