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

全栈若城

发布于 2025-02-15 10:29:01

16100

代码可运行

文章被收录于专栏：若城技术专栏若城技术专栏

运行总次数：0

代码可运行

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 中实现双向绑定的语法糖，常用于表单元素和自定义组件：

基础表单元素：

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

自定义组件：

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

<CustomInput v-model="inputValue" />

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

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

修饰符：

.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> 缓存组件状态，避免重复渲染：

基本用法：

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

生命周期钩子：

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

条件缓存：

使用 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 的状态管理库，核心概念：

State：单一状态树，存储全局数据。
Mutation：同步修改状态的方法（通过 commit 触发）。
Action：处理异步逻辑，最终通过 commit 提交 Mutation。
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 文档的标签。

跨域通信方案：

postMessage API：

父页面发送消息：

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

子页面接收消息：

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

同域下直接访问：

父页面访问子页面：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)。