2024年前端最全Vue（七）SPA单页面应用，2024年最新分享面试技巧

2401_84620100

于 2024-05-12 19:31:13 发布

阅读量914

点赞数 18

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84620100/article/details/138764453

版权

89 篇文章 0 订阅

订阅专栏

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

单页面是指整个应用程序只有一个唯一完整的HTML页面，而其它所谓的页面，其实都是组件片段而已，切换页面也只是切换一个HTML中显示不同的组件片段。在今后所有的开发项目都是单页面应用。

单页面应用与多页面应用对比：

	多页面应用	单页面应用
请求次数	每切换一次页面，都向服务器端重新发送请求；反复切换页面就会反复发送请求，请求次数多。	在首次加载时，就将唯一完整的HTML页面和所有其余页面组件一起下载下来，即使反复切换页面也不需要反复向服务器发送请求，请求次数绝对少。
公共资源	每次切换页面，都要重新请求页面中的bootstrap.css、jquery.js、bootstrap.js等多个页面都要用到的资源，请求次数多加载慢。	每次切换页面时，唯一完整的HTML外壳没有切换，所以不会重复发送请求，下载css和js文件，请求次数又少了很多，同时加载效率高。
加载效率	每次切换页面，都要删除旧的整棵DOM树，重建整棵DOM树，效率低。	每次切换页面时，因为只跟换部分组件片段显示，整个页面没有更换，DOM树也只更换部分节点，不用重建整棵DOM树，效率高。
页面切换动画	几乎不可能实现页面切换动画，因为页面切换需要同时看到前一个页面的后一半以及后一个页面的前一半；多页面应用不可能两个页面同时存在，所以无法实现。	比较容易实现页面切换动画，因为单页面应用的所有页面组件已经同时保存在客户端了，同时显示也是有可能的。

单页面应用步骤：

（1）先创建唯一完整的HTML页面（一个支持vue基本结构的空页面）

（2）创建所有"页面"组件文件

a.项目中，有几个"页面"，就要创建几个页面组件文件；

b.所有页面组件都要集中放在一个名为views的文件夹中；

c.每个页面组件其实都是一个子组件；

d.在唯一完整的HTML页面顶部引入页面组件；

e.创建404页面组件，在唯一完整的HTML页面顶部引入，加入到路由字典中最后一项：

{ path:“*”, component:NotFound }

//其中“*”表示除正确输入之外的所有情况

（3）创建路由器对象

a.在唯一完整的HTML页面顶部引入vue-router.js（官方）；

b.创建路由器对象。先将路由器对象保存在router/index.js文件中；然后先创建路由字典，再创建路由器对象；

//创建路由器字典

var routes=[

{path:“/相对路径”, component:页面组件对象名},

…

]

//创建路由器对象

var router=new VueRouter({ routes })

c.引入到唯一完整的HTML页面中；

关注