2023前端面试题

An-one

已于 2023-02-09 21:05:51 修改

阅读量1.7k

点赞数 1

分类专栏：前端面试题文章标签：前端 javascript vue.js Powered by 金山文档

于 2023-02-09 21:03:48 首次发布

本文链接：https://blog.csdn.net/Jshsbdhsh/article/details/128960550

版权

1.样式优先级的规则是什么?

!important>行内样式>嵌入样式>外链样式>id选择器>类选择器>标签选择器>复合选择器>通配符>继承样式

2.谈谈你对vue生命周期的理解

生命周期是什么？Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM–>渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。

3.vue 组件间通信方式

1.prop方式

2.自定义事件（ on)

3.全局事件总线（this.$bus)

4.pubsub.js (发布与订阅，一般用在react)

5.vueX

6.插槽

4.对SPA单页面的理解，它的优缺点分别是什么

SPA（Single Page Application）是一种技术，它能够在一个页面上提供完整的应用体验，通过AJAX和JavaScript技术来实现。

优点：

更快的加载时间：因为数据是在客户端而不是服务器端加载，因此SPA可以更快地加载页面；

更好的用户体验：SPA可以提供更好的用户体验，因为它可以更快地加载页面，并且可以更好地处理用户的交互；

更少的服务器负载：SPA可以减少服务器的负载，因为它可以把大部分的加载和处理工作都放在客户端；

更低的维护成本：SPA可以减少维护成本，因为所有的代码都在客户端，所以不需要每次更新都要发布新的版本。

缺点：

搜索引擎不友好：由于SPA是一个单页面应用，因此搜索引擎无法正确抓取，这可能会影响网站的SEO；

浏览器兼容性问题：由于SPA应用程序依赖于JavaScript，因此如果用户的浏览器不支持JavaScript，就无法正常使用SPA应用程序；

安全性问题：由于SPA应用程序的代码都在客户端，因此它更容易受到攻击；

测试困难：由于SPA应用程序的代码都在客户端，因此测试起来比较困难。

5.v-if和v-show有什么区别？

v-if 是条件渲染，它会根据表达式的值的真假来决定是否渲染，如果为假，则什么都不做；如果为真，则会渲染出元素，但是它会确保条件块在切换当中不会有任何的性能损失。

v-show 是条件展示，它不管表达式的值是什么，都会渲染出元素，只是根据表达式的值来确定是显示还是隐藏。它的优势在于，切换的时候比 v-if 要快，因为它不需要销毁再创建节点，只需要改变 CSS 属性，但是它的缺点也很明显，因为它渲染出来的元素在 DOM 中依然存在，所以它会对性能有一定的影响。

6.computed和watch的区别？

computed

computed是基于它们的依赖进行缓存的可计算属性，只有在其依赖值发生改变时才会重新计算。

watch

watch选项用于监听某个值的变化，当值发生改变时，会触发回调函数。它可以接收四个参数：新值、旧值、触发的表达式和 watch 实例本身。

7.vue-router路由模式有几种

哈希模式(Hash Mode)：使用URL的hash部分（即#及其后面的内容）来模拟一个完整的URL，当URL改变时，页面不会重新加载，只有hash值发生变化时，才会触发对应的路由函数。

历史模式(History Mode):使用HTML5 History API，当URL改变时，页面会重新加载，每次跳转都会向服务器发送一个请求，这种模式可以让搜索引擎更好的抓取页面，但是会增加服务器的压力。

8.如何解决vuex页面刷新数据丢失问题

1、使用vuex的persistedState插件，可以将vuex的状态持久化到本地存储中，当页面刷新时，从本地存储中读取vuex的状态，从而解决页面刷新数据丢失问题。

2、使用localStorage或者sessionStorage，将vuex的状态存储在本地，当页面刷新时，从本地存储中读取vuex的状态，从而解决页面刷新数据丢失问题。

3、使用vuex的plugin插件，在页面刷新时，从服务器端读取v

9.Vue中key是用来做什么的？为什么不推荐使用index作为key?

Vue中key是用来标识Vue中的元素和组件的唯一标识符，当Vue要处理元素和组件时，它会用key来追踪和区分它们。

不推荐使用index作为key的原因是：当Vue要重新排列元素和组件时，它会根据key来重新排列，如果使用index作为key，Vue会认为这些元素和组件都是新的，导致它们不能正确的重新排列。

10.JS基本数据类型，JS有几种方法判断变量的类型

JS基本数据类型有：

Number（数字）、String（字符串）、Boolean（布尔值）、Undefined（未定义）、Null（空）、Symbol（符号）。

JS有以下几种方法可以判断变量的类型：

typeof操作符：typeof操作符可以返回一个表示变量类型的字符串，比如：typeof 123 // “number” 。

instanceof操作符：instanceof操作符可以用来判断一个变量是否是某个对象的实例，比如：var a = new String("abc"); a instanceof String // true。

Object.prototype.toString()：Object.prototype.toString()可以返回一个表示变量类型的字符串，比如：Object.prototype.toString.call(123) // "[object Number]"。

constructor属性：变量的constructor属性可以指向变量的构造函数，比如：var a = new String("abc"); a.constructor == String // true。

11.罗列数组哪些操作方法1、会改变原数组，2、不改变原数组，3、数组去重

1、会改变原数组：

1) push()：向数组的末尾添加一个或多个元素，并返回新的长度。

2) pop()：删除数组的最后一个元素，并返回删除的元素。

3) shift()：删除数组的第一个元素，并返回删除的元素。

4) unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

5) reverse()：颠倒数组中元素的顺序。

6) sort()：对数组的元素进行排序。

7) splice()：通过删除或替换现有元素或者原地添加新的元素来修改数组。

2、不改变原数组：

1) concat()：连接两个或多个数组，并返回结果。

2) slice()：从某个已有的数组返回选定的元素。

3) filter()：通过指定函数测试所有元素，并返回符合条件的元素组成的新数组。

4) map()：对数组中的每个元素进行操作，并返回操作后的新数组。

5) reduce()：接收一个函数作为累加器，对数组中的每个元素（从左到右）应用该函数，最终将其减少为单个值。

6) every()：检查数组中的每个元素是否都能通过指定函数的测试。

7) some()：检查数组中的每个元素是否至少有一个能通过指定函数的测试。

3、数组去重：

1) Set()：Set 对象允许你存储任何类型的唯一值，并且可以使用数组的方法来去重。

2) filter()：使用 filter 方法，可以根据数组的某个值是否在新数组中存在，来去重。

3) includes()：使用 includes 方法，可以根据数组的某个值是否存在，来去重。

12.如何解决跨域？ajax、axios、jsonp的理解

跨域解决方案有：

JSONP：利用script标签没有跨域限制的特性，通过传递一个callback函数来解决跨域问题。

CORS：服务器端设置Access-Control-Allow-Origin来实现跨域，浏览器会对这个响应头进行处理，从而实现跨域。

代理服务器：利用代理服务器来转发请求，从而达到跨域的目的。

修改document.domain：修改document.domain属性来达到跨域的目的。

对ajax、axios、jsonp的理解：

（1）Ajax：Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的网页开发技术。它使用异步数据传输，可以在不重新加载整个页面的情况下更新部分网页内容。

（2）Axios：Axios是一个基于Promise的HTTP客户端，可用于浏览器和node.js中。它提供了一个简单的API来发出XMLHttpRequests（Ajax请求），并处理响应。

（3）JSONP：JSONP（JSON with Padding）是一种使用<script>标签加载外部资源的技术，用于解决跨域问题。它使用<script>标签加载数据，并将数据封装在一个回调函数中，以便在数据加载完成后调用该函数。

13.http和https的区别？ get和post的区别？

http和https的区别？

HTTP（HyperText Transfer Protocol）是一种基于TCP/IP通信协议的应用层协议，它规定了客户端和服务器端之间的通信方式，是一种无状态的、基于请求/响应模式的协议。

HTTPS（HyperText Transfer Protocol Secure）是在HTTP的基础上加入SSL/TLS安全层，以提供传输安全的网络传输协议。它使用证书进行身份认证，使用加密传输数据，可以有效防止数据在传输过程中被窃取和篡改。

HTTP和HTTPS的主要区别有：

传输协议不同：HTTP采用明文传输，HTTPS采用密文传输；

安全性不同：HTTP不加密，易受到窃听攻击；HTTPS采用SSL/TLS加密，可以有效防止数据被窃取和篡改；

端口不同：HTTP使用80端口，HTTPS使用443端口；

证书不同：HTTP不需要证书，HTTPS需要CA机构颁发的SSL证书；

性能

get和post的区别：<

最低0.47元/天解锁文章