Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >2025最新出炉--前端面试题九

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

作者头像
全栈若城
发布于 2025-02-15 02:29:01
发布于 2025-02-15 02:29:01
39502
代码可运行
举报
文章被收录于专栏:若城技术专栏若城技术专栏
运行总次数:2
代码可运行
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)。

适用场景

模板中需要动态计算的属性。

数据变化后需要执行非纯操作(如日志记录)。

代码示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// computed
computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

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

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

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

基础表单元素

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input v-model="message" placeholder="输入内容">
<select v-model="selected">
  <option>A</option>
  <option>B</option>
</select>

自定义组件

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<CustomInput v-model="inputValue" />

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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。

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// ES6 Module
import { foo } from './module.js';
export const bar = () => {};

// CommonJS
const foo = require('./module').foo;
module.exports = { bar: () => {} };

5. 说一下 vue 的缓存组件

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

基本用法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

生命周期钩子

  • activated:组件激活时触发(如恢复定时器)。
  • deactivated:组件失活时触发(如清除定时器)。

条件缓存

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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)。

性能

惰性代理(仅在访问时触发)。

初始化时全量劫持,内存占用高。

示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
    • 手动同步:在页面加载时从本地存储恢复数据。

代码示例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 使用 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

父页面发送消息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
document.getElementById('iframe').contentWindow.postMessage('data', 'https://子页面域名');

子页面接收消息:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)。

缓存优先级

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

示例流程

  1. 浏览器首次请求资源,服务端返回 Cache-Control: max-age=3600
  2. 1 小时内再次请求,直接使用强缓存(状态码 200)。
  3. 1 小时后,携带 If-Modified-SinceIf-None-Match 发起请求,若资源未修改返回 304。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-02-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
前端面试题 vue_vue面试题必问
9.VUE 中如何封装组件?什么组件,为什么要封装组件?组件中 data 为什么是一个函数?
全栈程序员站长
2022/10/04
9.1K0
前端面试题Vue答案
1.vue的原理? image.png 关键词: 虚拟DOM树+访问器属性 解释一下:响应式原理? 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历
酷走天涯
2021/03/04
2.6K0
前端一面经典vue面试题总结
我们可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的数据进行赋值。
bb_xiaxia1998
2022/11/08
1.2K0
19道高频vue面试题解答(上)
子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组件的单向数据流。每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。如果这样做了,Vue 会在浏览器的控制台中发出警告。
bb_xiaxia1998
2022/10/10
1.3K0
VUE面试题
1、v-show 和 v-if的区别,v-show 和 keep-alive 的区别
呆呆
2021/09/28
1.6K0
前端面试之Vue
视图模型双向绑定,是Model-View-ViewModel的缩写,也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型,View代表UI组件,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据。以前是操作DOM结构更新视图,现在是数据驱动视图。
CODER-V
2023/03/04
3.8K0
前端面试之Vue
前端面试题汇总-Vue篇
当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。
越陌度阡
2023/01/01
1.6K0
前端面试题汇总-Vue篇
Vue前端面试题
网页看着不方便,想要文档可以私聊我。要是有错别字和错误的地方,请各位大佬直接指出,谢谢啦!!
肥晨
2023/02/16
8260
Vue 面试题汇总
(1)、active-class 是 vue-router 模块的 router-link 组件的属性   (2)、使用 children 定义嵌套路由
LittlePanger
2020/04/14
3.1K0
阿里前端高频vue面试题(边面边更)
Vue2:Object.defineProperty 重新定义data 中所有的属性,Object.defineProperty 可以使数据的获取与设置增加一个拦截的功能,拦截属性的获取,进行依赖收集。拦截属性的更新操作,进行通知。
bb_xiaxia1998
2022/10/14
8710
vue面试题+答案,2021前端面试
MVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范
zz1998
2021/07/04
1.5K0
京东前端高频vue面试题
通俗点理解就是,vuex 弱化 dispatch,通过commit进行 store状态的一次更变;取消了action概念,不必传入特定的 action形式进行指定变更;弱化reducer,基于commit参数直接对数据进行转变,使得框架更加简易;
bb_xiaxia1998
2022/12/19
1.3K0
Vue 【前端面试题】
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚好背中了这道面试题
IT茂茂
2020/04/10
3.4K0
Vue 【前端面试题】
前端vue面试题2020及答案_c++ 面试题
101.Vue3.0 里为什么要用 Proxy API替代 defineProperty API?
全栈程序员站长
2022/10/04
4.4K0
前端vue面试题2020及答案_c++ 面试题
腾讯前端vue面试题合集2
早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单,location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站,它的 location.hash 的值为 '#search':
bb_xiaxia1998
2023/01/04
1.2K0
2021vue面试题+答案
v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
zz1998
2021/07/05
8620
vue面试题总结
ViewModel把view和model关联起来,ViewModel负责把Model的数据同步到view显出来,还负责吧view修改同步到Model。 答案详情
andyhu
2023/06/27
3590
vue面试题总结
2020最新前端面试题_2020年前端面试题
cookies、sessionStorage、localStorage的区别是什么?(浏览器)
全栈程序员站长
2022/09/27
7.1K0
前端面试题 --- Vue部分
转载链接:https://blog.csdn.net/qq_54753561/article/details/122149197
用户8087287
2022/10/31
2.1K0
前端面试题 --- Vue部分
2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」
之前博主有分享过Vue学习由浅到深的文章(Vue学习之从入门到神经) 现在Vue学的好的话马内真的不必后端差 所以今天博主就汇总下有关Vue的相关面试题
全栈程序员站长
2022/07/01
8.9K0
2021Vue.js面试题汇总及答案【全网最全 建议收藏】「建议收藏」
相关推荐
前端面试题 vue_vue面试题必问
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档