WEB前端高频面试题(五)—— Vue 八股文

等风来,不如追风去。 —— 一禅小和尚

Vue高频面试题

一、Vue生命周期

1. 1有哪些生命周期

系统自带:
  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  beforeDestroy
  destroyed


1.2 一旦进入到页面或者组件,会执行哪些生命周期,顺序。

 beforeCreate
 created
 beforeMount
 mounted


1.3 在哪个阶段有$el,在哪个阶段有$data

    beforeCreate 啥也没有
    created  有data没有el
    beforeMount 有data没有el
    mounted 都有


1.4 如果加入了keep-alive会多哪两个生命周期

  activated、deactivated


1.5 如果加入了keep-alive,第一次进入组件会执行哪些生命周期?

 beforeCreate
 created
 beforeMount
 mounted
 activated


6. 如果加入了keep-alive,第二次或者第N次进入组件会执行哪些生命周期?

​​​​​​​只执行一个生命周期:activated

二、v-show和v-if是干什么?有什么区别?

2.1 v-show

 显示和隐藏 : display:none进行隐藏 、display:block进行显示     

2.2 v-if

 创建和删除:remove、append     

2.3 区别

 显示和隐藏用:v-show
 创建和删除用:v-if
 ​
 频繁切换用:v-show
 不频繁切换用:v-if 
 ​
 首次加载:用v-if,不用v-show
 为什么:
             如果用v-if可以没有这个盒子,然后再通过v-if进行创建(但是第一次进入页面是没有这个盒子,是不加载的)。
### 2025年最新前端面试题汇总 以下是根据当前技术趋势和高频考点整理的2025年最新前端面试题汇总,涵盖多个核心领域和技术点: --- #### 1. **JavaScript 深入理解** - JavaScript 中的事件循环是如何工作的?[^1] - 解释一下闭包的概念,并给出一个实际的应用场景。 - 如何使用 `Promise` 处理异步操作?与回调函数相比有哪些优势? ```javascript function asyncOperation() { return new Promise((resolve, reject) => { setTimeout(() => resolve("Operation completed"), 1000); }); } asyncOperation().then(result => console.log(result)); ``` --- #### 2. **React/Vue/Angular 框架相关** - React 中的虚拟 DOM 是如何工作的?它解决了什么问题?[^1] - Vue 中的响应式原理是什么?如何实现数据的双向绑定? - Angular 中的依赖注入机制是如何实现的?[^1] --- #### 3. **性能优化** - 如何优化前端页面的加载速度?列举几个常见的方法。[^1] - Web Worker 的作用是什么?请提供一个简单的代码示例。[^3] ```javascript const worker = new Worker('worker.js'); worker.postMessage('Hello, worker!'); worker.onmessage = function(event) { console.log('Received from worker:', event.data); }; ``` --- #### 4. **浏览器与网络** - 浏览器的渲染过程是怎样的?从输入 URL 到页面显示经历了哪些步骤? - HTTP/2 相较于 HTTP/1.1 有哪些改进? - 什么是服务端渲染(SSR)?它的优缺点分别是什么? --- #### 5. **算法与数据结构** - 实现一个快速排序算法,并分析其时间复杂度。 - 使用 `AtomicIntegerArray` 更新数组中的某个元素,如何保证线程安全?[^2] ```java import java.util.concurrent.atomic.AtomicIntegerArray; public class AtomicIntegerArrayExample { public static void main(String[] args) { AtomicIntegerArray array = new AtomicIntegerArray(5); array.set(0, 10); array.getAndIncrement(0); // 线程安全地将索引 0 的值加 1 System.out.println(array.get(0)); // 输出 11 } } ``` --- #### 6. **TypeScript** - TypeScript 与 JavaScript 的主要区别是什么? - 如何在 TypeScript 中定义一个接口并实现它? ```typescript interface User { name: string; age: number; } const user: User = { name: "Alice", age: 25 }; console.log(user.name); // 输出 Alice ``` --- #### 7. **Web 新特性** - 什么是 WebAssembly (Wasm),它有哪些应用场景?[^1] - Service Worker 的作用是什么?如何实现离线缓存功能? --- #### 8. **工程化与工具链** - Webpack 的核心概念有哪些?如何配置一个简单的 Webpack 项目? - Babel 在前端开发中的作用是什么?[^1] --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值