2025最新出炉--前端面试题九

1. Vue 和 React 的使用经验对比

回答：

特性	Vue	React
设计理念	渐进式框架，注重易用性。	声明式 UI 库，强调函数式编程。
模板语法	基于 HTML 的模板（支持 JSX）。	完全依赖 JSX。
状态管理	Vuex（官方方案）。	Redux、MobX、Context API。
响应式原理	数据劫持（Vue2: Object.defineProperty；Vue3: Proxy）。	手动触发更新（setState）。
组件通信	props/emit、Provide/Inject。	props、Context、状态管理库。

---

2. vue 的 computed 和 watch 有什么区别

回答：

特性	computed	watch
用途	基于依赖的派生值（如过滤列表、格式化数据）。	监听数据变化并执行副作用（如异步请求、复杂逻辑）。
缓存机制	结果缓存，依赖不变时不会重新计算。	无缓存，每次数据变化都会触发回调。
异步支持	不支持异步操作。	支持异步操作（需手动处理）。
语法形式	函数或对象（get/set）。	函数或对象（handler、deep、immediate）。
适用场景	模板中需要动态计算的属性。	数据变化后需要执行非纯操作（如日志记录）。

代码示例：

// computed
computed: {fullName() {return this.firstName + ' ' + this.lastName;}
}// watch
watch: {userId(newVal) {this.fetchUserData(newVal); // 异步请求},deep: true // 深度监听对象内部变化
}

---

3. v-model 平时你都怎么使用

回答：
v-model 是 Vue 中实现双向绑定的语法糖，常用于表单元素和自定义组件：

1. 基础表单元素：

   <input v-model="message" placeholder="输入内容">
   <select v-model="selected"><option>A</option><option>B</option>
   </select>
   

2. 自定义组件：

   • 父组件通过 v-model 绑定数据：

     <CustomInput v-model="inputValue" />
     

   • 子组件通过 modelValue 接收并触发 update:modelValue 事件：

     props: ['modelValue'],
     emits: ['update:modelValue'],
     methods: {handleInput(e) {this.$emit('update:modelValue', e.target.value);}
     }
     

3. 修饰符：

   • .lazy：输入框失焦后同步数据。
   • .number：自动将输入转为数值类型。
   • .trim：去除首尾空格。

---

4. import 和 require 之间什么区别

回答：

特性	import（ES6 Module）	require（CommonJS）
加载方式	静态加载（编译时解析）。	动态加载（运行时解析）。
模块类型	支持异步模块（Top-Level Await）。	仅支持同步加载。
Tree Shaking	支持（未使用代码可被移除）。	不支持。
作用域	严格模式（默认启用）。	非严格模式（需手动启用）。
语法	import { func } from 'module'。	const func = require('module').func。

示例：

// ES6 Module
import { foo } from './module.js';
export const bar = () => {};// CommonJS
const foo = require('./module').foo;
module.exports = { bar: () => {} };

---

5. 说一下 vue 的缓存组件

回答：
通过 <keep-alive> 缓存组件状态，避免重复渲染：

1. 基本用法：

   <keep-alive><component :is="currentComponent"></component>
   </keep-alive>
   

2. 生命周期钩子：

   • activated：组件激活时触发（如恢复定时器）。
   • deactivated：组件失活时触发（如清除定时器）。

3. 条件缓存：

   • 使用 include/exclude 属性指定缓存组件：

     <keep-alive include="ComponentA,ComponentB"><router-view></router-view>
     </keep-alive>
     

---

6. vue3.0 为什么使用 proxy 拦截数据

回答：
Vue3 使用 Proxy 替代 Vue2 的 Object.defineProperty，主要原因如下：

对比项	Proxy	Object.defineProperty
深层监听	自动监听嵌套对象和数组变化。	需递归遍历对象，性能差。
新增/删除属性	支持直接监听。	需手动调用 Vue.set/Vue.delete。
数组索引修改	直接监听。	需重写数组方法（如 push）。
性能	惰性代理（仅在访问时触发）。	初始化时全量劫持，内存占用高。

示例：

const data = { a: 1, b: { c: 2 } };
const proxy = new Proxy(data, {get(target, key) {console.log('读取属性:', key);return target[key];},set(target, key, value) {console.log('设置属性:', key, value);target[key] = value;return true;}
});

---

7. 能讲讲 vuex 吗, 刷新页面会怎样

回答：
Vuex 是 Vue 的状态管理库，核心概念：

1. State：单一状态树，存储全局数据。
2. Mutation：同步修改状态的方法（通过 commit 触发）。
3. Action：处理异步逻辑，最终通过 commit 提交 Mutation。
4. Getter：计算派生状态（类似 computed）。

刷新页面问题：

• Vuex 的状态存储在内存中，页面刷新后状态丢失。
• 解决方案：
  • 持久化插件：如 vuex-persistedstate，将状态保存到 localStorage。
  • 手动同步：在页面加载时从本地存储恢复数据。

代码示例：

// 使用 vuex-persistedstate
import createPersistedState from 'vuex-persistedstate';
export default new Vuex.Store({plugins: [createPersistedState()],state: { user: null },mutations: {setUser(state, user) {state.user = user;}}
});

---

8. http1.1 和 http2.0 之间什么区别

回答：

特性	HTTP/1.1	HTTP/2
连接方式	每个请求需独立 TCP 连接（队头阻塞）。	多路复用，一个连接并发多个请求。
头部压缩	无压缩，重复头部浪费带宽。	使用 HPACK 算法压缩头部。
服务器推送	不支持。	服务端可主动推送资源（如 CSS/JS）。
二进制传输	文本格式（可读性高，效率低）。	二进制帧（解析高效，安全性高）。
优先级控制	无。	支持请求优先级设置。

示例：
HTTP/2 多路复用避免了 HTTP/1.1 的队头阻塞，大幅提升页面加载速度。

---

9. iframe 是什么, 正常页面如何与 iframe 通信

回答：
iframe 是用于在页面中嵌入其他 HTML 文档的标签。

跨域通信方案：

1. postMessage API：

   • 父页面发送消息：

     document.getElementById('iframe').contentWindow.postMessage('data', 'https://子页面域名');
     

   • 子页面接收消息：

     window.addEventListener('message', (e) => {if (e.origin !== 'https://父页面域名') return;console.log(e.data);
     });
     

2. 同域下直接访问：

   • 父页面访问子页面：document.getElementById('iframe').contentWindow.document。
   • 子页面访问父页面：window.parent.document。

---

10. 强缓存和协商缓存有了解吗

回答：

缓存类型	强缓存	协商缓存
响应头	Cache-Control: max-age=3600 或 Expires。	Last-Modified 或 ETag。
触发条件	资源未过期时直接使用本地缓存。	资源过期后向服务器验证是否更新。
HTTP 状态码	200 (from disk cache)。	304 (Not Modified)。

缓存优先级：

• 强缓存优先级高于协商缓存。
• Cache-Control 的 max-age 优先级高于 Expires。

示例流程：

1. 浏览器首次请求资源，服务端返回 Cache-Control: max-age=3600。
2. 1 小时内再次请求，直接使用强缓存（状态码 200）。
3. 1 小时后，携带 If-Modified-Since 或 If-None-Match 发起请求，若资源未修改返回 304。

---