最近在找前端实习，自己整理了一些八股。
1. 请解释HTML5中的语义化标签，并列举几个常用的语义化标签及其用途。
解释：语义化标签是指通过标签名字本身就能表达其内容含义及用途，可以提高代码的可读性与维护性，有利于搜索引擎优化（ SEO ）和辅助技术理解页面结构（比如屏幕阅读器，可以利用标签帮助残障人士浏览网站，提高页面的可交互性）。
举例：section 对页面内容进行主题分组,就像一本书里的章节，划分不同的功能模块; footer 定义页面的底部，通常包含版权信息、联系方式等，可以向用户传达结束的信号。
2. 请说明CSS3中Flexbox（弹性盒布局）和 Grid（网格布局）的主要区别，以及它们各自适用于哪些场景。
Flexbox 和 Grid 的主要区别在于维度。
Flexbox 是一维布局模型，他一次只能处理一个维度（行或列），擅长控制内容在一条线上的分布和对齐。适用于导航栏、卡片列表、表单元素对齐（让输入框和按钮对齐）等；
Grid 是二维布局模型，它可以同时处理行和列两个维度，擅长定义整体页面框架和大结构。比如整体页面布局（可以精准控制各区域的尺寸和位置）、复杂的二维网格（照片墙、产品展示网格）等。
3. 如何实现一个响应式的网页设计？请列出关键技术点，并解释移动优先设计策略。
响应式页面设计是为了让页面在不同设备（手机、平板、电脑）上都能提供舒适浏览体验。
关键技术点
- 流式布局：使用相对单位代替固定像素，让容器随视口变化。
- 弹性媒体：设置图片、视频等元素的最大宽度为100%，高度自动，确保他们不会溢出容器。
- CSS3媒体查询：通过@media规则，根据屏幕宽度、分辨率等条件应用不同的样式，实现断点调整。
移动优先设计策略：指先为小屏幕编写基础样式，然后逐步为大屏幕添加样式。因为移动端网络和硬件优先，应优先加载核心内容，这样可以让开发者专注于重要的功能和内容，也可以让代码逻辑更加清晰，易维护。
4. 请解释JavaScript中的闭包（closure）及其实际应用场景，并举例说明。
闭包是函数与其词法环境的组合，可以让我们在一个内层函数中访问到外层函数的作用域。
应用场景：创建私有变量，防止外部直接访问和修改，保护重要数据；防抖与节流，利用闭包保存定时器ID。
5. 在ES6+中，箭头函数和普通函数在this指向方面有什么区别？请举例说明。
普通函数的this指向会根据运行时的调用方式动态调整，比如在独立函数中调用 this ，this指代的是全局对象（如浏览器中为 window ）；作为构造函数调用时，this 指代的是新创建的实例对象。
箭头函数没有自己的 this ，它捕获的是定义时外层作用域的this，并且定义后无法改变。实际应用：避免动态 this 带来的混淆。
6. 请解释Promise的作用，以及async/await是如何基于Promise实现异步流程控制的。
Promise 是用于处理异步操作的对象，具有非阻塞性，可以统一处理成功或失败的结果，还解决了回调地狱的问题，让异步代码的编写和管理更加清晰。
async/await让我们可以用同步的方式写异步代码， async 是标记一个函数为异步函数，await 会暂停当前函数但不阻塞整个进程，等待 Promise 完成并获取其结果。
7. 请列举TypeScript中接口（interface）和类型别名（type alias）的异同点，并说明何时使用哪一个。
相同点：接口和类型别名都是用来描述对象和函数的形状，都可以被拓展。
不同点：接口只能描述对象类型，可以被重复声明自动合并；类型别名可以描述联合类型、元组等，不可以被重复声明，会报错。
8. Vue3 组合式 API 与选项式 API 的主要区别是什么？
选项式API是根据选项类型分组，简单直观，适合小型组件和简单页面；
组合式API是按逻辑功能组织，当组件复杂时，代码的可读性和维护性都会更好，并且对TS更友好，适合大项目。
9. 解释一下 Vue3 中的响应式原理，特别是 reactive 和 ref 的区别及适用场景。
响应式原理：利用 ES6 的 Proxy 对目标对象进行代理，拦截对属性的读取和设置，在 get 中收集依赖，在 set 中触发更新，从而实现自动更新视图。
区别：reactive 只接受对象，返回该对象的响应式代理，在访问和修改时可以直接操作属性，在处理深层嵌套对象时写起来更直接，比如表单对象；而ref可以接受任何类型的值，返回一个带有.value属性的响应式对象，使用起来更加方便。
10. 在 Vue3 中，<script setup> 语法糖有什么优势？
<script setup> 语法糖是 Vue3 中组合式API的语法糖，可以让代码更加聚焦于逻辑本身，大大提高代码的可读性和维护性，使用起来也更加方便，比如他可以自动注册组件，导入的组件可以直接使用。
11. Vue Router 中，如何实现路由守卫？请列举几种常见的路由守卫及其用途。
Vue Router 提供多种路由守卫来拦截导航过程。主要有三类：
1.全局守卫：在路由配置全局使用，在路由跳转前触发，比如 beforeEach 做登录校验。
2.路由独享守卫：只针对进入特定路由触发，比如权限校验只有管理员才能进入的页面。
3.组件内守卫：写在组件内部，比如 beforeRouteLeave 可以提醒用户保存草稿、清理定时器等。
12. 在 Vue 应用中，什么是动态路由和静态路由？
静态路由指所有人均可访问的路由，而动态路由即需要权限的路由，比如管理后台，用户中心。
13. 什么是嵌套路由？请举例说明在什么场景下会用到。
嵌套路由就是一个路由里套一个路由，如果一个页面只有中间内容区域需要根据路由动态切换，j就可以使用嵌套路由，把布局组件作为父路由，把各个内容页面作为子路由，子组件通过 children 数组来定义。
14. Vue3 的生命周期钩子有哪些？
Vue3中常见的生命周期钩子有 onMounted 、onUpdated 、onUnmounted，可以直接导入这些函数并在顶层调用。例如，onMounted 会在组件挂载到 DOM 后执行，我会用他来发起异步请求或操作 DOM ; onUnmounted 可以用来清理定时器或取消事件监听，防止内存泄漏。
15. v-if 和 v-show 的区别是什么？在实际开发中如何选择？
当 v-if 的初始条件为假时，元素不会被渲染，可以节省初始渲染开销；但是 v-show 只是隐藏元素，无论条件真假都会被渲染，适合于需要频繁切换显示的情况，比如下拉菜单。
16. Vue3 中如何进行组件通信？列举常用的几种方式。
1.父子通信：父传子用 props, 子传父用 emits 触发事件。
2.兄弟通信：通常需要通过共同的父组件作为桥梁，或者使用状态管理。
3.跨层通信（祖孙通信）：用 provide 和 reject ，比如在跟组件提供信息，直接在深层嵌套的组件注入使用。
4.复杂的情况下，会用 Pinia 来管理全局状态，比如用户登录信息、购物车信息等，这样任何组件都能方便地访问和修改。
17. 你了解 Vue3 的 computed 和 watch 吗？它们有什么区别，分别在什么时候使用？
computed是用来计算属性的，它依赖于其他响应式数据，当依赖变化时，它会重新计算并返回新值。它自带缓存，当依赖不变时，多次访问会返回原先计算好的值，不会重复执行，但是它必须返回一个值。
watch是用来监听一个或多个响应式数据的变化，当数据变化时执行特定的逻辑。它没有缓存，每次变化都会执行，但是可以执行异步操作，在数据变化后可以调用API。
如果仅仅是数据展示，用 computed ，如果在数据变化后要执行操作，则用 watch。
18. 简单说说 Pinia 的优点，解释一下。
Pinia 的 API 更简单，代码量更少，更加容易理解，而且对 TypeScript 更友好，而且 Pinia 的每个store 都是独立的，可以在需要的时候引入。
19. 在 Pinia 中，如何定义一个 store？如何在组件中使用 store 里的数据和方法？
在 Pinia 中，使用 defineStore 定义 store ,用 ref 定义 state ，computed 定义 getters ，普通函数或异步函数定义 actions ，最后返回他们。
在组件中，可以直接导入对应的 store 函数并调用，得到实例后，可以通过 store.count 访问 state ，通过 state.increment() 调用 action。
20. 常用的 Git 命令有哪些？
- git init 初始化仓库
- git add . 添加文件到暂存区
- git push 推送到远程仓库
- git commit -m 提交代码
- git pull 拉取远程更新
- git brance 查看分支
- git status 查看当前文件状态
- git log 查看提交历史
- git checkout -b 创建并切换分支
21. HTTP 和 HTTPS 有什么区别？HTTPS 是如何保证安全的？
HTTP 和 HTTPS 主要区别在于安全性。HTTP 是明文传输，数据容易被窃取和篡改；而 HTTPS 在此基础上加入了 SSL/TLS 加密层，可以保护数据机密性、完整性和身份真实性。
HTTPS 的安全机制主要是通过 SSL/TLS 握手实现：
- 客户端连接服务器，服务器返回带有公钥的数字证书，客户端验证证书是否可靠。
- 验证通过后，客户端生成一个随机密钥，用服务器的公钥加密后发送给服务器。
- 服务器用私钥解密得到对称密钥，后续通信双方用这个密钥进行对称加密，保证数据的传输安全。
- 同时，协议还通过校验机制防止数据被篡改。
22. 常见的 HTTP 状态码有哪些？
- 200 请求成功
- 401 未认证，比如 token 过期
- 403 无权限，提示权限不足，无法操作
- 404 路径错误，提示访问资源不存在
- 500 服务器错误，显示服务器开小差了，稍后重试
23. HTTP 的请求方法有哪些？GET 和 POST 有什么区别？
请求方法：
- GET 获取数据（读取数据）
- POST 提交数据，创建新资源（提交表单、数据）
- DELETE 删除数据
- PUT 更新整个资源
区别：GET 的参数在 URL 里，受 URL 的长度影响，不适合传大量数据，不适合传敏感信息，多次提交也不会改变服务器数据；POST 的参数在请求体里，比 GET 安全一点，但重复提交会造成重复数据。
24. TCP 和 UDP 有什么区别？分别适用于什么场景？
TCP 是传输控制协议，它通过三次握手建立连接，有确认重传机制，保证数据完整有序到达，缺点是速度较慢。适用于文件传输，网页浏览、邮件发送。
UDP 是用户数据报协议，它直接发数据包，不保证到达，但速度快，延迟低，适用于实时性要求高的场景，比如音视频直播、语音通话等，允许偶尔丢包，但不能卡顿。
25. 什么是三次握手？简单描述一下过程。
- 客户端发送一个 SYN 包给服务器，表示请求连接，并进入等待状态。
- 服务器接收后，回复一个 SYN + ACK 包，表示同意连接，并等待客户端的确认。
- 客户端收到后，再回复一个 ACK 包，表示确认收到。这时连接建立成功，双方开始传输数据。
26. 什么是跨域？为什么会有跨域限制？
跨域是浏览器出于安全考虑，限制前端页面访问不同源的服务器资源。协议、域名和端口只要有一个不同，就是跨域。
为什么：这是浏览器的同源策略，，主要是防止恶意网站窃取用户数据。
27. 你常用的跨域解决方案有哪些？请简单说明一种的原理。
在开发环境中用 Vite 的 proxy 代理来解决跨域。代理的原理是本地启动一个同源服务器，把请求转发到后端，浏览器看到的请求是同源的，从而绕过跨域限制。
28. Axios 是什么？它在项目中通常用来做什么？
Axios 是一个基于 Promise 的 HTTP 客户端，在前端项目中主要负责发送请求、接收响应，实现前后端数据交互。
怎么用：
- 封装 axios 实例：统一配置 baseURL、超时时间。
- 拦截器：请求拦截里统一加上 token，响应拦截里统一处理401跳转提醒，错误提示，
- 错误处理：在响应拦截中把错误信息统一弹窗提示，，避免每个请求都写catch。
29. 什么是组件化开发？它有哪些好处？
组件化开发是指将页面拆成多个独立、可复用的组件，每个组件封装自己的结构和逻辑，最后组合成完整的应用。它复用性强、好维护、开发效率高、逻辑清晰。
30. 你了解 React 吗？React 和 Vue 有哪些主要的区别？
我了解 React 的组件定义（函数组件和类组件）、JSX 的基本用法、常用的 Hooks，（比如 useState、useEffect） ，也看过 React 官方文档。
我觉得框架只是工具，核心思想是相通的。比如 Vue 的组合式 API 和 React 的 Hooks 都是为了解决逻辑复用问题；Vue 的模板和 React 的 JSX 都是为了描述 UI。所以只要掌握了组件化、数据流这些核心概念，切换框架时更多的是语法上的适应，我可以很快上手。
31. JavaScript 中有哪些数据类型？如何判断一个变量的类型？
JavaScript 的数据类型分为基本类型和引用类型。基本类型有七种：string、number、boolean、null、undefined、symbol、bigint，引用类型主要是 object ，包括数组、函数、日期等。
判断变量类型：typeof 可以用来判断基本类型和函数，但是对 null 会返回 object，对数组等对象只能返回 object，无法进一步区分。
