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

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

回答：

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

回答：

代码示例：

// 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 之间什么区别

回答：

示例：

// 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，主要原因如下：

示例：

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/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 优先级高于 Expires。

示例流程：

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