vue前端面试题

⭐ 作者简介：码上言


⭐ 代表教程：Spring Boot + vue-element 开发个人博客项目实战教程


⭐专栏内容：个人博客系统


⭐我的文档网站：http://xyhwh-nav.cn/


⭐微信公众号：码上言

1.阅读以下代码，说出输出结果:

for(var i=0;i<5;i++){
	setTimeout(function() {
	console.log(i);},1000);
}

这段代码的输出结果会是5个数字5，因为在循环中使用了setTimeout函数，而setTimeout函数是一个异步函数，会将回调函数放入事件队列中，等待下一次事件循环时执行。因此，在循环中的5个setTimeout函数都会在循环结束后执行，此时变量i的值已经变成了5，因此会输出5个数字5。

使用let关键字：

for(var i=0;i<5;i++){
	setTimeout(function() {
	console.log(i);},1000);
}

如果使用let关键字来声明变量i，那么输出的结果会是0、1、2、3、4，因为let关键字会创建一个块级作用域，每次循环都会创建一个新的变量i，避免了变量共享的问题。

在循环中，每次迭代都会创建一个新的块级作用域，并在该作用域中声明一个新的变量i，因此每个setTimeout函数都能正确地输出变量i的值

2.Javascript中 == ”和“ === ”的区别?

答：在JavaScript中，“”和“=”都是比较运算符，用于比较两个值是否相等。它们的区别在于比较的方式和比较的结果。

’ '比较运算符会进行类型转换，将两个值转换为相同的类型后再进行比较。如果两个值的类型不同，那么会先将其中一个值转换为另一个值的类型，然后再进行比较。例如，字符串“1”和数字1在使用“ ”比较时会被转换为相同的类型，然后再进行比较。
“===”比较运算符不会进行类型转换，只有在两个值的类型相同且值相等时才会返回true。如果两个值的类型不同，或者类型相同但值不相等，那么会返回false。
以下是示例:

var a = 1;
var b = "1";
console.log(a == b); // true，因为b会被转换为数字1
console.log(a === b); // false，因为类型不同

在上述代码中，使用“ == ”比较运算符比较变量a和变量b时，变量b会被转换为数字1，因此返回true。而使用“ === ”比较运算符比较会出现false，因为不是同一个类型

3.在浏览器中输入一个网址后，发生了什么?

1、 浏览器会检查该网址是否已经缓存，如果已经缓存，则直接从缓存中读取网页内容。如果没有缓存，则继续执行下一步。

2、 浏览器将该网址发送给DNS服务器，以获取该网址对应的IP地址。

3、浏览器使用获取到的IP地址向该网站的服务器发送一个HTTP请求。

4、服务器接收到请求后，会根据请求的内容生成一个响应。响应包括HTML、CSS、JavaScript等文件，以及其他资源，如图片、视频等。

5、浏览器接收到响应后，会解析HTML、CSS和JavaScript文件，并将它们渲染成网页。

6、浏览器会执行JavaScript代码，以便实现交互式功能和动态效果。

7、最后，浏览器将渲染好的网页显示给用户

4.写出以下http 状态码表达的含义:

1、200: 请求成功。服务器已成功处理了请求，并返回了所请求的数据。

2、 401: 未授权。表示请求需要进行身份验证，客户端需要提供有效的身份证明才能访问所请求的资源。

3、404: 未找到。表示服务器无法找到所请求的资源，通常是因为请求的URL或文件不存在。

4、500: 服务器内部错误。表示服务器在处理请求时遇到了错误，无法完成请求。这通常是由于服务器端的代码或配置错误引起的。

5.http 协议中 get和 post 的用法是什么?

GET请求用于获取数据，POST请求用于提交数据。GET请求比POST请求更常用，因为它可以被缓存、收藏和分享。但是，如果需要向服务器提交数据，就必须使用POST请求。

6、post 请求常见的数据格式(content-type 的几种取值)

POST请求常见的数据格式包括以下几种：

1、application/x-www-form-urlencoded：这是最常见的POST数据格式，也是默认的数据格式。数据会被编码成键值对的形式，多个键值对之间用&符号连接。例如：key1=value1&key2=value2。

2、multipart/form-data：这种格式用于上传文件，可以上传二进制文件和文本文件。数据会被分成多个部分，每个部分都有自己的Content-Type和

Content-Disposition。例如：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; filename="example.txt"
Content-Type: text/plain

This is an example file.

------WebKitFormBoundary7MA4YWxkTrZu0gW--

3、application/json：这种格式用于提交JSON数据。数据会被编码成JSON格式。例如：{“key1”:“value1”,“key2”:“value2”}。

4、text/plain：这种格式用于提交纯文本数据。数据会被直接发送到服务器，没有任何格式。例如：Hello World。

5、application/xml：这种格式用于提交XML数据。数据会被编码成XML格式。例如：

<?xml version="1.0" encoding="UTF-8"?>
<root>
  <key1>value1</key1>
  <key2>value2</key2>
</root>

这些数据格式都需要在请求头中设置Content-Type字段来指定

7.CSS中position 属性的值有哪些?

CSS中position属性用于指定元素的定位方式，常见的取值包括以下几种：

static：默认值，元素按照正常文档流排列，不进行定位。

relative：相对定位，元素相对于其正常位置进行定位。可以使用top、right、bottom、left属性来指定元素相对于正常位置的偏移量。

absolute：绝对定位，元素相对于其最近的已定位祖先元素进行定位。如果没有已定位的祖先元素，则相对于body元素进行定位。可以使用top、right、bottom、left属性来指定元素相对于祖先元素的偏移量。

fixed：固定定位，元素相对于浏览器窗口进行定位，不随滚动条滚动。可以使用top、right、bottom、left属性来指定元素相对于窗口的偏移量。

sticky：粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。可以使用top、right、bottom、left属性来指定元素相对于其容器的偏移量。

8.CSS中样式属性优先级如何排序?

CSS中的样式属性优先级可以按照以下顺序进行排序：

!important：具有最高优先级的样式属性是使用!important关键字设置的。这意味着无论其他样式属性的优先级如何，都会覆盖它们。例如：color: red !important;

行内样式：其次是行内样式，即在HTML标签中使用style属性设置的样式属性。例如：

Hello World

ID选择器：如果多个样式属性都应用于同一个元素，那么具有ID选择器的样式属性优先级最高。例如：#myDiv {color: red;}

类选择器、属性选择器和伪类选择器：如果多个样式属性都应用于同一个元素，那么具有类选择器、属性选择器和伪类选择器的样式属性优先级次之。例如：.myClass {color: red;}

元素选择器和伪元素选择器：如果多个样式属性都应用于同一个元素，那么具有元素选择器和伪元素选择器的样式属性优先级最低。例如：div {color: red;}

需要注意的是，如果优先级相同，则后面的样式属性会覆盖前面的样式属性。例如：

.myClass {
  color: red;
}

.myClass {
  color: blue;
}

最终，元素的颜色会是蓝色，因为后面的样式属性覆盖了前面的样式属性。

9.Vue 组件间通信有哪些方式?

1、父子组件通信：父组件可以通过props向子组件传递数据，子组件可以通过$emit触发事件来向父组件传递数据。

2、子父组件通信：子组件可以通过$emit触发事件向父组件传递数据，父组件可以通过v-on监听子组件的事件来接收数据。

3、兄弟组件通信：可以通过一个空的Vue实例作为中央事件总线（event bus）来实现兄弟组件之间的通信。一个组件可以向事件总线发送事件，另一个组件可以监听事件并接收数据。

4、Vuex状态管理：Vuex是Vue的官方状态管理工具，可以用于管理应用程序中的所有组件的状态。可以在一个组件中修改状态，然后在另一个组件中读取状态。

5、$refs引用：可以使用$refs引用另一个组件，并直接访问其属性和方法。这种方式不太推荐，因为它破坏了组件的封装性和可重用性。

总的来说，Vue组件间通信的方式有很多种，可以根据具体的场景选择合适的方式。

10.Vue 组件生命周期有哪些?

vue组件生命周期是指Vue实例从创建到销毁的整个过程，包括了一系列的钩子函数，这些钩子函数在不同的阶段会被自动调用。Vue组件的生命周期可以分为以下几个阶段：

1、beforeCreate：在实例被创建之初，数据观测和初始化事件还未开始。

2、created：实例已经完成了数据观测和初始化事件，但是挂载阶段还未开始，$el属性还不存在。

3、beforeMount：在挂载之前被调用，此时$el属性已经存在，但是还未挂载到DOM中。

4、mounted：在挂载完成后被调用，此时组件已经被挂载到DOM中。

5、beforeUpdate：在数据更新之前被调用，此时DOM还未更新。

6、updated：在数据更新之后被调用，此时DOM已经更新。

7、beforeDestroy：在实例销毁之前被调用，此时实例还未销毁。

8、destroyed：在实例销毁之后被调用，此时实例已经被销毁。

9、activated：在组件被激活时调用（keep-alive组件专用）。

10、deactivated：在组件被停用时调用（keep-alive组件专用）。

这些钩子函数可以让我们在不同的阶段执行一些操作，例如在created钩子函数中进行一些初始化操作，在mounted钩子函数中进行DOM操作等。理解Vue组件的生命周期对于编写高质量的Vue应用程序非常重要。