vue面试基础

qq_48519172

已于 2024-04-05 16:48:59 修改

阅读量662

点赞数 18

文章标签： vue.js 前端 javascript

于 2024-04-05 14:37:50 首次发布

本文链接：https://blog.csdn.net/qq_48519172/article/details/137398211

版权

本文探讨了虚拟列表和懒加载优化加载时间，Vue双向绑定、axios封装、keep-alive组件缓存、登录流程管理，以及小程序开发、箭头函数、Set和Map的区别、类数组对象、Promise的使用、watch和computed对比、Vue组件间通信、路由机制、HTTP缓存、跨域限制等Web开发的关键知识点。

摘要由CSDN通过智能技术生成

1. 虚拟列表

        实现方式不同。懒加载是将页面上的图片、视频等资源延迟加载，只有当用户将它们滚动到可视区域时才会加载，从而减少页面的加载时间。虚拟列表是将大型列表数据分段加载，只渲染当前可见的部分数据，随着滚动条的滚动，只渲染当前可见的列表项，从而大大减少了渲染时间。
        优化的点不同。懒加载主要是针对页面上的资源进行优化，减少页面的加载时间，这对网络繁忙卡顿有帮助。虚拟列表主要是针对大型列表数据进行优化，减少渲染时间和内存占用。
        使用场景不同。懒加载适用于需要加载大量图片、视频等资源的页面，如图片展示、视频播放等。虚拟列表适用于需要渲染大量数据的页面，如电商网站中的商品列表、社交网站中的好友列表等

虚拟列表的实现-CSDN博客

2.vue双向绑定

原理
1.vue中的v-model就是双向绑定的代表,它采用的**数据劫持** 结合 **发布者-订阅者模式**的方式,通过**object.defineProperty()** 来劫持各个属性的**setter,getter**,在数据变动时发布消息得订阅者,然后触发相对的监听回调来渲染到视图
    具体步骤:
        1-需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
        2-compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
        Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
            1、在自身实例化时往属性订阅器(dep)里面添加自己
            2、自身必须有一个update()方法
            3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
        3-MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化
        -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

https://blog.csdn.net/weixin_49549509/article/details/134243031

3.axios封装了什么

https://blog.51cto.com/u_16213674/7603344

请求地址、请求拦截器、相应拦截器

4.vue中的keep-alive

可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存

activated 当 keep-alive 包含的组件再次渲染的时候触发
deactivated 当 keep-alive 包含的组件销毁的时候触发

keep-alive是一个抽象的组件，缓存的组件不会被mounted,为此提供activated和deactivated钩子函数

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

Vue中keep-alive的深入理解和使用 - 掘金

5.登录流程怎么做的

第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，则跳转到对应路由页面
每次调后端接口，都要在请求头中加token
后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
如果前端拿到状态码为401，就清除token信息并跳转到登录页面

6.小程序分包怎么做的

微信小程序分包教程-CSDN博客

7.箭头函数和普通函数区别

箭头函数和普通函数的区别
箭头函数的this是定义时决定的，普通函数是看调用方法。
箭头函数不能成为构造函数
箭头函数不能使用call、apply、bind来修改this指向
箭头函数不绑定arguments ，...剩余参数
箭头函数不具有prototype原型对象，不具有super,不有new

8.改变this指向有那些函数

call apply bind

改变this指向的方法——六种_更改this 指向方法-CSDN博客

9.常用js数组方法

push，pop，unshift，shift，includes，Array.isArray，indexOf，lastIndexOf，Array.from()，Array.of()，fill()，findIndex()，copyWithin，concat，every，filter，find，findIndex，forEach，map，join，reverse，toString

es6中新增数组方法有哪些-前端问答-PHP中文网

https://www.cnblogs.com/whwa/p/12403945.html

10.js数组长度为10如何删除第五个

let arr = new Array(10); // 创建一个长度为10的数组
// 假设已经填充了数组，现在删除第五个元素
arr.splice(4, 1); // 从索引4开始，删除1个元素
console.log(arr); // 输出修改后的数组

11.字符串转换为数组

let str = "Hello, World!";
let arr = str.split(""); // 按字符分割

let str = "Hello, World!";
let arr = Array.from(str); 

let str = "Hello, World!";
let arr = [...str]; // 将字符串转为数组

let str = "Hello, World!";
let arr = str.match(/[\s\S]/g); // 匹配任意字符

对象->数组
Object.keys() 方法： 这种方法将对象的键转换为数组。
Object.values() 方法： 这种方法将对象的值转换为数组
Object.entries() 和 map()： 这种方法将对象的键值对转换为数组的元素
const arr = Object.entries(obj).map(([key, value]) => [key, value]);

12.数组转化为字符串

toString()    将数组转换成一个字符串
toLocaleString()    把数组转换成本地约定的字符串
join()    将数组元素连接起来以构建一个字符串

13.set和map区别

Set是一种集合，用于存储唯一的值。

Set中不允许有重复的值。Set中的元素不按照特定的顺序排列，但系统默认会进行升序排列。

Set不支持直接访问存储的值，如果需要获取值，通常需要通过迭代器进行遍历。

Set适合用于需要存储一组唯一值，并且不关心顺序的场景，例如去重、判断元素是否存在等。

Map是一种键值对的集合，它将键与值相关联。

Map中，键是唯一的，每个键只能出现一次，但值可以重复。

Map提供了通过键来访问和修改对应值的功能，如通过get方法获取值。

Map适合用于需要将值与特定的键关联的场景，例如存储配置信息、构建字典、缓存等。

Set和Map的主要区别在于：

存储数据的唯一性：Set存储唯一值，Map存储键值对，键唯一，值可以重复。
功能差异：Set主要用于存储唯一值，支持添加、删除和检查唯一值的操作；Map提供了键值对的存储和访问，支持通过键获取和修改值。

使用场景：Set适用于需要存储一组唯一值且不关心顺序的场景；Map适用于需要将值与特定键关联，并通过键访问值的场景。

14.什么是类数组

类数组（Array-like）指的是具有类似数组结构的对象，它们具有一些类似于数组的特性，但不是真正的数组。

类数组对象具有以下特点：

拥有 length 属性：类数组对象通常具有一个 length 属性，表示对象中元素的个数。
按照索引访问元素：可以通过索引值从类数组对象中获取元素，就像访问数组元素一样。
没有数组原型上的方法：类数组对象不具备数组原型上的方法（如 push、pop、forEach 等），因此无法直接使用这些方法。

15.promise是用来做什么的

主要用来解决异步问题和回调地狱问题（那种异步嵌套异步的）。
promise是一个容器，存放着某个未来才会结束的事件的结果（通常是一个异步操作的结果）。
从语法上说，promise是一个对象，可以从它获取异步操作的最终状态（成功或失败）。
promise是一个构造函数，这个回调函数中放的是异步操作，对外提供统一的API，自己身上有all,reject,resolve等方法，原型上有then，catch等方法。（ps：注意new Promise((resolve,reject)=>{}) 中参数是一个回调函数，回调函数有两个参数）
promise是一个异步编程的解决方案，用这个不用一个个嵌套也能按想要的顺序得到结果了。
promise是es6新增的API，用于异步任务的封装。
promise它内部还会切换3种不同的状态：
一个 Promise 必然处于以下几种状态之一，而且进入一个状态后不会回头变成别的状态：

        待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
        已兑现（fulfilled）：意味着操作成功完成。
        已拒绝（rejected）：意味着操作失败。

【js】js中promise理解_promise在js中的作用-CSDN博客

16.promise的链式调用

.then中new Promise .then

Promise的链式调用_promise链式调用-CSDN博客

17.promise的all和promise有什么区别

Promise.all是将多个promise实例，包装成一个新的promise实例。

Promise.all([promise1, promise2]).then(success1, fail1)
//只有当promise1和promise2都成功的时候才会调用success1

Promise.race也是将多个promise实例，包装成一个新的promise实例。

 Promise.race([promise1, promise2]).then(success1, fail1)
 //当promise1或者promise2中有一个成功就会调用success1

18.vue中的watch和computed有什么区别

区别：计算属性computed支持缓存，只有依赖数据发生改变，才会重新进行计算；不支持异步，当computed内有异步操作时无效，无法监听数据的变化。而监听属性watch不支持缓存，数据变，直接会触发相应的操作；支持异步。

19.computed缓存如何实现！！！

详解vue computed的缓存实现原理_vue.js_脚本之家

20.watch为什么支持异步！！！

https://wenku.csdn.net/answer/0cb5d451e00749ef84f771ca11837494

21.vue组件通讯方式

Props、Vuex、$parent、$children、Event Bus、Provide 和 Inject、$refs

22.vue导航守卫

1、全局守卫:

beforeEach:在导航触发前调用
beforeResolve:在导航确认前调用
afterEach:在导航结束后调用

2、路由守卫:在路由配置上定义

3、组件守卫:在组件中定义

这几种导航守卫的执行顺序是:

全局beforeEach -> 路由beforeEnter -> 组件beforeRouteEnter
全局beforeResolve -> 组件beforeRouteUpdate
全局afterEach -> 组件beforeRouteLeave
可以在守卫中调用next()来 resolve这个钩子,或者 next(false) 来取消当前的导航。

23.导航守卫使用场景

https://baijiahao.baidu.com/s?id=1767828963782993250&wfr=spider&for=pc

24.vue的路由跳转

router-link、router.push、router.replace、router.go、location

25.路由传参和区别

https://blog.csdn.net/qisheng188/article/details/135484975

26.http缓存

浏览器第一次向一个web服务器发起http请求后，服务器会返回请求的资源，并且在响应头中添加一些有关缓存的字段如：Cache-Control、Expires、Last-Modified、ETag、Date等等。之后浏览器再向该服务器请求该资源就可以视情况使用强缓存和协商缓存。

    强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。
    协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。
    联系与区别：两种缓存方式最终使用的都是本地缓存；前者无需与服务器交互，后者需要。

27.常用的响应头有哪些

HTTP常用请求头和响应头有哪些?_http响应头-CSDN博客

28openid代表的含义是什么

OpenID是一个以用户为中心的数字身份识别框架，它具有开放、分散性。OpenID 的创建基于这样一个概念：我们可以通过 URI (又叫 URL 或网站地址)来认证一个网站的唯一身份，同理，我们也可以通过这种方式来作为用户的身份认证。

29小程序内嵌会h5页面

web-view

小程序内嵌H5那些事儿-CSDN博客

30.回流和重绘

触发回流一定会触发重绘, 而触发重绘却不一定会触发回流

回流：当Render Tree中部分或全部元素的尺寸,结构或者某些属性发生改变时,浏览器重新渲染部分或全部文档的过程

重绘：而重绘则是视觉效果变化引起的重新绘制。比如 color 或者 background 发生了变化，那就该给触发重绘的元素化化妆，化成它想要的样子。

31.防抖和节流

防抖 (Debouncing) 的含义是指在一定时间内，多次触发同一个事件，只执行最后一次操作。例如，当我们在搜索框中输入关键词时，输入框会不断触发 oninput 事件，如果每次输入都去请求服务器获取数据，会造成不必要的请求浪费。此时就可以使用防抖技术，将一定时间内的多次触发合并为一次操作，只请求一次服务器数据，减少了请求次数和服务器负载。

　　节流 (Throttling) 的含义是指在一定时间内，多次触发同一个事件，只执行第一次操作。例如，当我们拖动网页上的滚动条时，会不断触发 onscroll 事件，如果每次触发都去计算滚动距离，会造成浏览器性能下降。此时就可以使用节流技术，将一定时间内的多次触发限制为一次操作，只计算一次滚动距离，提高了浏览器性能和用户体验。

32.网络协议的七层有哪些

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

OSI七层与TCP/IP协议_tcpip7层协议-CSDN博客

33.跨域是http的限制还是浏览器的限制为什么会有这个限制

浏览器的限制

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

什么是跨域? 出现原因及解决方法-CSDN博客