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

文章目录

      • 1. Vue 和 React 的使用经验对比
      • 2. vue 的 computed 和 watch 有什么区别
      • 3. v-model 平时你都怎么使用
      • 4. import 和 require 之间什么区别
      • 5. 说一下 vue 的缓存组件
      • 6. vue3.0 为什么使用 proxy 拦截数据
      • 7. 能讲讲 vuex 吗, 刷新页面会怎样
      • 8. http1.1 和 http2.0 之间什么区别
      • 9. iframe 是什么, 正常页面如何与 iframe 通信
      • 10. 强缓存和协商缓存有了解吗

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

回答：

特性VueReact
设计理念渐进式框架，注重易用性。声明式 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 有什么区别

回答：

特性computedwatch
用途基于依赖的派生值（如过滤列表、格式化数据）。监听数据变化并执行副作用（如异步请求、复杂逻辑）。
缓存机制结果缓存，依赖不变时不会重新计算。无缓存，每次数据变化都会触发回调。
异步支持不支持异步操作。支持异步操作（需手动处理）。
语法形式函数或对象（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，主要原因如下：

对比项ProxyObject.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.1HTTP/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。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/18011.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

rancher on k3s

rancher on k3s

本次部署采用3节点的etcd服务2master节点的k3s使用helm部署的ranchervip(keepalived) 一、安装etcd服务 # 准备 3 个节点部署 etcd cd /hskj/tmp wget https://github.com/etcd-io/etcd/releases/download/v3.3.15/etcd-v3.3.15-linux-amd64.tar.gz tar xzvf etcd-v3.3.15-…
阅读更多...
NLLB 与 ChatGPT 双向优化：探索翻译模型与语言模型在小语种应用的融合策略

NLLB 与 ChatGPT 双向优化：探索翻译模型与语言模型在小语种应用的融合策略

作者&#xff1a;来自 vivo 互联网算法团队- Huang Minghui 本文探讨了 NLLB 翻译模型与 ChatGPT 在小语种应用中的双向优化策略。首先介绍了 NLLB-200 的背景、数据、分词器和模型&#xff0c;以及其与 LLM&#xff08;Large Language Model&#xff09;的异同和协同关系。接着…
阅读更多...
无人机图像拼接数据的可视化与制图技术：以植被监测为例

无人机图像拼接数据的可视化与制图技术：以植被监测为例

无人机技术在生态环境监测中的应用越来越广泛&#xff0c;尤其是在植被监测领域。通过无人机获取的高分辨率影像数据&#xff0c;结合GIS技术&#xff0c;可以实现对植被覆盖、生长状况等的精确监测与分析。本文将通过一个实际案例&#xff0c;详细讲解无人机图像拼接数据的可视…
阅读更多...
ONES 功能上新｜ONES Copilot、ONES TestCase、ONES Wiki 新功能一览

ONES 功能上新｜ONES Copilot、ONES TestCase、ONES Wiki 新功能一览

ONES Copilot 支持基于当前查看的工作项相关信息&#xff0c;利用 AI 模型&#xff0c;在系统中进行相似工作项的查找&#xff0c;包括基于已关联工作项的相似数据查找。 应用场景&#xff1a; 在查看工作项时&#xff0c;可利用 AI 模型&#xff0c;基于语义相似度&#xff0c…
阅读更多...
基于带通滤波的camera脏污检测算法可以完全替代imatest

基于带通滤波的camera脏污检测算法可以完全替代imatest

1.概要 脏污检测算法&#xff0c;基于opencv c实现&#xff0c;便于模组厂快速集成到软件工具中&#xff0c;适用于camera模组厂脏污拦截&#xff0c;特别是对浅脏污具备很好的定位效果&#xff1b;便于画质评价工程师了解camera模组制程的问题提出改善方向。 2.技术介绍 下图…
阅读更多...
后勤数据源定制主控室

后勤数据源定制主控室

场景&#xff1a;在学习了解后勤数据源过程中&#xff0c;看到觉得有用的note&#xff0c;分享给大家。 1779063 - 常见问题&#xff1a;关于 LO 数据提取 - 定制主控室&#xff08;事务 LBWE&#xff09; 1.问题&#xff1a; 是否需要为每个应用程序组件下的每个数据源添加池…
阅读更多...
云原生AI Agent应用安全防护方案最佳实践（上）

云原生AI Agent应用安全防护方案最佳实践（上）

当下&#xff0c;AI Agent代理是一种全新的构建动态和复杂业务场景工作流的方式&#xff0c;利用大语言模型&#xff08;LLM&#xff09;作为推理引擎。这些Agent代理应用能够将复杂的自然语言查询任务分解为多个可执行步骤&#xff0c;并结合迭代反馈循环和自省机制&#xff0…
阅读更多...
三格电子——TCP转ProfibusDP网关使用场景

三格电子——TCP转ProfibusDP网关使用场景

型号&#xff1a; SG-TCP-Profibus(M) 感兴趣可以TB 搜 三格电子 使用场景&#xff1a; ModbusTCP Client 通过 ModbusTCP 控制 Profibus DP 接口设备。 ModbusTCP 侧支持03H、04H、10H 功能码&#xff0c;只支持 1 个client连接&#xff1b; ProfibusDP 侧支持 DP v0。 P…
阅读更多...
剑指offer第2版：搜索算法（二分/DFS/BFS）

剑指offer第2版：搜索算法（二分/DFS/BFS）

查找本质就是排除的过程&#xff0c;不外乎顺序查找、二分查找、哈希查找、二叉排序树查找、DFS/BFS查找 一、p39-JZ3 找出数组中重复的数字&#xff08;利用特性&#xff09; 数组中重复的数字_牛客题霸_牛客网 方法1&#xff1a;全部排序再进行逐个扫描找重复。 时间复杂…
阅读更多...
小众宝藏分子生物学实验中常用的软件：InSequence

小众宝藏分子生物学实验中常用的软件：InSequence

欢迎使用InSequence&#xff0c;正版免费使用&#xff0c;操作友好&#xff0c;小白也能轻松上手哦~ 1. 全新中文界面与更大操作空间 全中文简洁直观的操作界面&#xff0c;常用功能固定至工具栏&#xff0c;随心自定义更改工具栏&#xff0c;让科研人员能够更快速地上手&…
阅读更多...
南京观海微电子----整流滤波电路实用

南京观海微电子----整流滤波电路实用

01 变压电路 通常直流稳压电源使用电源变压器来改变输入到后级电路的电压。电源变压器由初级绕组、次级绕组和铁芯组成。初级绕组用来输入电源交流电压&#xff0c;次级绕组输出所需要的交流电压。通俗的说&#xff0c;电源变压器是一种电→磁→电转换器件。即初级的交流电转化…
阅读更多...
python 的框架 dash 开发TodoList Web 应用

python 的框架 dash 开发TodoList Web 应用

TodoList Web 应用 项目简介 这是一个基于 Dash 和 SQLAlchemy 的现代化 TodoList Web 应用&#xff0c;提供了简单而强大的待办事项管理功能。 主要特性 添加新的待办事项删除待办事项标记待办事项为已完成/未完成分页展示待办事项列表实时更新和交互 技术栈 PythonDash …
阅读更多...
tenda路由器WriteFacMac存在远程命令执行漏洞(CVE-2024-10697)

tenda路由器WriteFacMac存在远程命令执行漏洞(CVE-2024-10697)

一、漏洞简介 tenda路由器WriteFacMac存在远程命令执行漏洞 二、漏洞影响 tenda路由器三、网络测绘&#xff1a; fofa: title"Tenda | LOGIN"四、复现过程 POC 1 GET /goform/WriteFacMac?macls%20%3E/webroot/1.txt HTTP/1.1 Accept: text/html,application/…
阅读更多...
无需编码5分钟免费部署云上调用满血版DeepSeek

无需编码5分钟免费部署云上调用满血版DeepSeek

大家好&#xff0c;我是 V 哥。如何自己部署DeepSeek调用满血版。首先&#xff0c;如果你遇到了使用公共服务器时的延迟或限制&#xff0c;想要本地部署以获得更好的性能和稳定性。你是不是也想自己来部署DeepSeek呢&#xff0c;其实除了自己部署本地DeepSeek&#xff0c;还可以…
阅读更多...
linux笔记3----防火墙（ubuntu）

linux笔记3----防火墙（ubuntu）

防火墙管理工具 ubuntu里使用ufw来管理防火墙。ufw是一个管理防火墙规则的前端工具。本文阐述如何开启、关闭防火墙&#xff0c;放行指定端口。 因为我采用putty远程来使用&#xff0c;需要关闭防火墙或者放行22端口。 核心思维 因为ufw只是一个前端工具&#xff0c;所以一开…
阅读更多...
【音视频】RTSP拉流: RTP负载AAC详解(三)

【音视频】RTSP拉流: RTP负载AAC详解(三)

此文为系列文章&#xff0c;此系列主要讲解RTSP客户端的拉流及播放&#xff0c;文章持续更新&#xff0c;会从rtsp的基本协议讲起&#xff0c;如何一步步实现音视频的拉流过程&#xff0c;包括一系列涉及到的协议&#xff0c;rtsp&#xff0c;sdp&#xff0c; rtp&#xff08;本…
阅读更多...
若依系统环境搭建记录

若依系统环境搭建记录

开源若依系统网上资料也很全的&#xff0c;本篇博文记录下自己搭建环境过程中遇到的一些问题。 配置Maven和编辑器选择 我懒得配置Eclipse了&#xff0c;直接用vscode作为编辑器&#xff0c;后面构建运行都用命令行。 配置数据库连接 按照mysql5.7按网上教程即可&#xff1…
阅读更多...
【MySql】应用系统等保测评MySQL服务器相关策略设置以及最终验证，MySQL安全策略设置以及最终验证

【MySql】应用系统等保测评MySQL服务器相关策略设置以及最终验证，MySQL安全策略设置以及最终验证

文章目录 一、概要二、环境及实现三、前期准备四、操作步骤1、所有的数据库需要设置三权账户&#xff1a;系统管理员、网络管理员和安全管理员创建系统管理员账户&#xff1a;创建网络管理员账户&#xff1a;创建安全管理员账户&#xff1a; 2、所有数据库密码的负责度策略需要…
阅读更多...
bootplus管理系统 file/download 任意文件下载漏洞

bootplus管理系统 file/download 任意文件下载漏洞

bootplus管理系统 file/download 任意文件下载漏洞 漏洞描述 bootplus是基于SpringBoot + Shiro + MyBatisPlus的，拥有接口管理，权限管理，监控组件等功能的一体化权限管理框架。该项目中的file/download接口存在任意文件下载漏洞， 攻击者可以通过该漏洞下载查看目标系统的…
阅读更多...
《open3d qt 网格采样成点云》

《open3d qt 网格采样成点云》

open3d qt 网格采样成点云 效果展示二、流程三、代码效果展示 二、流程 创建动作，链接到槽函数，并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionMeshUniformSample_triggered();//均匀采样 void MainWindow::
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023