一、前端基础三件套HTML / CSS / JavaScript当面试官问出“是否熟悉前端基本技术包括 HTML/CSS/JavaScript介绍一下” 时千万不要只回答“熟悉”两个字。建议采用“定义 → 核心特点 → 简单示例 → 总结” 的结构化方式展现你的技术深度和表达逻辑。1. HTML超文本标记语言—— 网页的“骨架”HTML 是构建网页的基础结构语言它不负责美观也不负责交互核心作用是定义网页里“有什么内容”以及内容的语义比如哪些是标题、哪些是段落、哪些是图片/链接。核心特点由一系列标签如h1、p、img组成标签通常成对出现少数单标签如img、input标签具有语义化特性比如h1代表一级标题nav代表导航栏利于 SEO 搜索引擎理解和团队代码维护所有网页的底层结构都是 HTML 搭建的没有 HTML 就没有网页的基本形态。简单示例2. CSS层叠样式表—— 网页的“皮肤”CSS 是用来美化 HTML 结构的样式语言核心作用是控制网页元素的外观颜色、字体、大小、布局位置、间距、排列方式让网页从单调的骨架变成美观的界面。核心特点实现结构与样式分离HTML 只管结构CSS 只管样式便于后期修改和维护支持“层叠”特性多个 CSS 规则可以叠加生效优先级高的规则会覆盖优先级低的如内联样式 ID 选择器 类选择器支持响应式设计可以通过媒体查询media根据不同设备手机、电脑、平板调整样式适配不同屏幕尺寸。简单示例基于上面的 HTML3. JavaScript —— 网页的“大脑”JavaScript 是前端的脚本语言解释型语言核心作用是实现网页的交互逻辑和动态效果让网页从“静态展示”变成“可交互的动态页面”。核心特点可以操作DOM文档对象模型动态修改 HTML 结构和 CSS 样式处理用户交互响应点击、输入、滚动、拖拽等用户操作支持异步请求基于Promise、async/await以及fetch/axios在不刷新页面的情况下加载数据如电商网站的商品列表刷新是前端生态的核心Vue、React、Angular 等主流框架都是基于 JavaScript或其超集 TypeScript构建的。简单示例基于前面的 HTML/CSS4. 总结前端基础三件套的关系技术角色定位核心职责HTML结构层骨架决定网页“有什么内容”是前端的基础CSS样式层皮肤决定网页“长什么样”负责视觉呈现JavaScript行为层大脑决定网页“能做什么”负责交互和动态效果二、Vue 技术栈从使用到理解第二个高频问题“是否使用过 Vue 技术栈谈一谈具体使用和理解”这个问题几乎是 Vue 面试的开场白回答时要突出自己的实践经验和思考深度建议从“实际使用场景 → 核心模块落地 → 基础示例 → 底层理解”四个层次展开。1. 实际项目中的 Vue 技术栈实践我在多个实际项目中深度使用过 Vue 技术栈以Vue3 为主兼容 Vue2 维护场景核心应用场景包括后台管理系统基于 Element Plus移动端 H5基于 Vant轻量级企业官网以下是具体的落地细节1.1 组件化开发Vue 的核心基石拆分逻辑将页面拆分为通用组件按钮、表格、弹窗和业务组件如后台系统的“权限菜单组件”、H5 的“商品卡片组件”组件通信父子组件用props父传子emits子传父Vue3 的v-model支持多字段绑定如表单组件同时绑定“值”和“状态”跨层级/全局用provide/inject适合祖孙组件或Pinia全局状态管理插槽Slot自定义组件内容比如表格组件支持自定义列内容通过具名插槽实现。1.2 响应式系统Vue2基于Object.defineProperty仅支持对象已有属性数组需重写方法存在局限性Vue3基于Proxy支持数组、对象新增属性响应式更完整性能更好实际选择基本类型用ref如表单输入值const inputVal ref()对象/数组用reactive如列表数据const list reactive([])。1.3 路由与状态管理Vue Router配置路由表、动态路由后台系统根据用户权限生成、路由守卫登录验证、权限拦截、路由懒加载() import(./Page.vue)优化首屏加载状态管理Vue2 用 VuexVue3 用Pinia更轻量、支持 TS、无需嵌套模块比如全局存储用户信息、菜单权限按业务拆分模块用户模块、权限模块。1.4 组合式 APIComposables—— 逻辑复用利器Vue3 的 Composition API 最大的优势是逻辑复用。比如将“表单验证”“列表加载分页筛选”等通用逻辑封装为组合式函数在多个组件中复用1.5 工程化实践构建工具Vue2 用 WebpackVue3 用Vite启动/热更新速度提升数倍开发体验极佳类型支持结合 TypeScript通过defineProps/defineEmits实现组件类型校验提升代码健壮性规范用 ESLint Prettier 统一代码风格用 Vue DevTools 调试组件和响应式数据。2. Vue3 TS 基础示例以下是一个极简的 Vue3 组件示例覆盖了核心用法响应式、事件、生命周期、TS 类型3. 对 Vue 技术栈的核心理解3.1 设计理念渐进式框架Progressive Framework这是 Vue 最核心的特点 ——按需使用不强制全量接入小型项目只用到 Vue 的核心响应式 模板无需路由、状态管理中大型项目逐步接入 Vue Router路由、Pinia状态、Element PlusUI等生态灵活扩展。3.2 核心优势易用性模板语法接近 HTML新手上手快中文文档完善学习曲线平缓高效性响应式系统自动更新 DOM虚拟 DOM 减少真实 DOM 操作开发效率高生态完善官方维护的路由、状态管理、UI 库Element Plus / Vant覆盖绝大多数业务场景兼容性Vue2 兼容 IE11Vue3 支持现代浏览器可根据项目需求选择。3.3 Vue2 vs Vue3 核心差异维度Vue2Vue3响应式实现Object.definePropertyProxy更完整支持新增属性代码组织Options API选项式Composition API组合式逻辑复用更强TS 支持弱原生支持类型友好性能一般体积更小、渲染更快编译时优化3.4 适用场景分析✅适合后台管理系统、移动端 H5、企业官网、中小型前端应用快速迭代、团队协作❌不适合极致性能场景如大型游戏、需要极致灵活度的底层框架可选择 React / 原生。 面试回答技巧与加分点不要只背概念结合你做过的项目说比如“我在后台管理系统中用 Pinia 管理用户权限解决了多组件共享状态的问题”主动提 Vue3 新特性如 Fragment多根节点、Teleport传送门、Suspense异步组件加载展示你对技术前沿的关注对比 Vue2 和 Vue3从响应式原理、性能优化、TS 支持等角度对比体现你的技术深度谈工程化提到 Vite、ESLint、Prettier、Git Hooks 等展示你具备团队协作和工程化思维。