HTML/CSS/JS 基础与 Vue 技术栈深度解析

一、前端基础三件套：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）根据不同设备（手机、电脑、平板）调整样式，适配不同屏幕尺寸。

简单示例（基于上面的 HTML）：

---

3. JavaScript ------ 网页的"大脑"

JavaScript 是前端的脚本语言 （解释型语言），核心作用是实现网页的交互逻辑和动态效果，让网页从"静态展示"变成"可交互的动态页面"。

核心特点：

• 可以操作 DOM（文档对象模型）：动态修改 HTML 结构和 CSS 样式；

• 处理用户交互：响应点击、输入、滚动、拖拽等用户操作；

• 支持异步请求 ：基于 Promise、async/await 以及 fetch/axios，在不刷新页面的情况下加载数据（如电商网站的商品列表刷新）；

• 是前端生态的核心：Vue、React、Angular 等主流框架都是基于 JavaScript（或其超集 TypeScript）构建的。

简单示例（基于前面的 HTML/CSS）：

4. 总结：前端基础三件套的关系

技术	角色定位	核心职责
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 用 Vuex，Vue3 用 Pinia（更轻量、支持 TS、无需嵌套模块），比如全局存储用户信息、菜单权限，按业务拆分模块（用户模块、权限模块）。

1.4 组合式 API（Composables）------ 逻辑复用利器

Vue3 的 Composition API 最大的优势是逻辑复用。比如将"表单验证""列表加载+分页+筛选"等通用逻辑封装为组合式函数，在多个组件中复用：

1.5 工程化实践

• 构建工具 ：Vue2 用 Webpack，Vue3 用 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 Plus（UI）等生态，灵活扩展。

3.2 核心优势

• 易用性：模板语法接近 HTML，新手上手快，中文文档完善，学习曲线平缓；

• 高效性：响应式系统自动更新 DOM，虚拟 DOM 减少真实 DOM 操作，开发效率高；

• 生态完善：官方维护的路由、状态管理、UI 库（Element Plus / Vant）覆盖绝大多数业务场景；

• 兼容性：Vue2 兼容 IE11，Vue3 支持现代浏览器，可根据项目需求选择。

3.3 Vue2 vs Vue3 核心差异

维度	Vue2	Vue3
响应式实现​	Object.defineProperty	Proxy（更完整，支持新增属性）
代码组织​	Options API（选项式）	Composition API（组合式，逻辑复用更强）
TS 支持​	弱	原生支持（类型友好）
性能​	一般	体积更小、渲染更快（编译时优化）

3.4 适用场景分析

• ✅ 适合：后台管理系统、移动端 H5、企业官网、中小型前端应用（快速迭代、团队协作）；

• ❌ 不适合：极致性能场景（如大型游戏）、需要极致灵活度的底层框架（可选择 React / 原生）。

💡 面试回答技巧与加分点

1. 不要只背概念：结合你做过的项目说，比如"我在后台管理系统中用 Pinia 管理用户权限，解决了多组件共享状态的问题"；

2. 主动提 Vue3 新特性：如 Fragment（多根节点）、Teleport（传送门）、Suspense（异步组件加载），展示你对技术前沿的关注；

3. 对比 Vue2 和 Vue3：从响应式原理、性能优化、TS 支持等角度对比，体现你的技术深度；

4. 谈工程化：提到 Vite、ESLint、Prettier、Git Hooks 等，展示你具备团队协作和工程化思维。