前端：遇到的面试题

HTML，CSS

mvvm 框架和 mvc 框架的区别

· MVC 框架是模型-视图-控制器的缩写，它是一种通过将代码分为三个部分的方式来组织应用程序的结构，这三个部分分别是模型（Model）、视图（View）和控制器（Controller）。模型表示数据（处理数据），视图表示用户界面，控制器负责管理数据和用户界面之间的交互。

· MVVM 框架是模型-视图-视图模型的缩写，它是一种通过将代码分为三个部分的方式来组织应用程序的结构，这三个部分分别是模型（Model）、视图（View）和视图模型（ViewModel）。模型表示数据，视图表示用户界面，视图模型则是两个部分的连接通道，负责将模型的数据绑定到视图上，使视图和模型之间的交互更加简单。

· 区别：

在 MVC 中，控制器负责处理视图和模型之间的数据传递。而在 MVVM 中，视图模型则负责处理视图和模型之间的数据传递，它通过数据绑定将模型数据和视图进行绑定，使得数据的变化可以自动更新视图。

CSS 选择器的优先级

‌CSS选择器主要包括：元素选择器、类选择器（class）、ID 选择器和通用选择器（通配符）。

① 元素选择器是最基本的选择器，它根据 HTML 元素\标签的类型来选择元素。比如 p 选择器可以选择当前 HTML 里所有的 <p> 标签的元素。

② 类选择器是通过 HTML 元素的类属性 来选择元素，使用 . 符号来表示，后面跟着类名。比如 .my-class 选择器将选择所有类名为 my-class 的元素‌。

③ ID 选择器是通过 HTML 元素的 ID 属性 来选择元素。ID 选择器使用 # 符号来表示，后面跟着 ID 名。ID 在HTML文档中是唯一的 ，所以你可以使用它来为特定的元素设置样式，因此在同一个 HTML 页面不能出现同一个 ID，哪怕它们的元素不是同一个类型。

④ 通用选择器（通配符）是使用 * 符号来选择页面上的所有元素。通配符选择器通常用于清除默认样式或为所有元素设置基础样式，但不推荐频繁使用，因为它可能会影响页面性能‌。

那么这些选择器的优先级为 ID 选择器 > 类选择器 > 元素选择器 > 通用选择器。

Vue

如何理解 Vue 的响应式

在 Vue 3 中，响应式系统通过 reactive 和 ref 这两个 API 实现数据的响应式追踪。

ref：将一个基础数据类型 或单一对象 包裹为响应式引用，可以通过 .value 访问数据，例如数字、字符串、数组等。
reactive：将一个对象转为响应式对象，适合用于复杂的嵌套结构。

响应式 API 的 watch 和 computed 都用于监听和响应数据变化，但它们的用法和场景不同：

computed：适用于计算依赖其他响应式数据得出的值。当依赖的数据变化时，computed 会重新计算并返回缓存的结果。此外 computed 具有缓存机制，只有在依赖数据变化时才重新计算，这使其在多次访问时性能更优。
watch：用于监听响应式数据的变化，执行回调函数（如异步操作、API 请求、日志记录等），适合处理异步任务 和复杂逻辑。watch 不缓存结果，数据变化时总会触发回调。

js 复制代码

import { reactive, ref, computed, watch } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'Alice',
    age: 25
  }
});
const count = ref(0);
count.value++; // 更新值时使用 .value

const doubleCount = computed(() => count.value * 2);  // 依赖 count，且只在 count 改变时重新计算
watch(() => state.user.age, (newAge, oldAge) => {  // 回调函数
  console.log(`Age changed from ${oldAge} to ${newAge}`);
});

Vue 的钩子：created 和 mounted

Vue 的生命周期钩子函数：Vue 组件实例从生成 new 到被销毁 destory 的过程各阶段执行的生命周期函数，比如创建实例，装载模板，渲染模板等，这个就被称为钩子函数 （监听函数），每当 Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

Vue 的八大生命周期钩子函数有：

函数	调用时间	作用
beforeCreate	vue实例初始化之前调用	在组件实例初始化后，数据观测和事件机制等都还未配置完成，无法访问到 data 和 methods 等属性
created	vue实例初始化之后调用	组件实例已创建完成，属性、方法等已经可以访问
beforeMount	挂载到DOM树之前调用	在模板 template 编译、虚拟 DOM 渲染之前，DOM 还没有挂载到页面上
mounted	挂载到DOM树之后调用	组件模板已经挂载到页面，真实的 DOM 可被访问
beforeUpdate	数据更新之前调用	组件的响应式数据改变，虚拟 DOM 即将重新渲染之前
updated	数据更新之后调用	组件完成数据更新，DOM 更新同步完成
beforeDestroy	vue实例销毁之前调用	组件实例即将被销毁、从页面中移除之前
unmounted	vue实例销毁之后调用	组件实例被销毁、DOM 已从页面中移除

总体而言，Vue 组件的实例化遵循这个流程：按顺序先处理 JavaScript 逻辑（初始化数据和方法），然后编译模板 template (生成虚拟 DOM 树)，最后将其挂载到 DOM（渲染到真实 DOM）。

真实 DOM 和虚拟DOM

· 虚拟 DOM：虚拟 DOM 是 Vue 使用的一种轻量级别的对象树 ，一个抽象概念，它描述了真实 DOM 的结构。每当数据变化时，渲染函数生成新的虚拟 DOM，并与旧的虚拟 DOM 进行差异比较（diff）以确定哪些节点发生了变化（diff 算法），然后将这些差异应用到真实 DOM 上，最终由浏览器进行渲染。

· 真实 DOM：真实 DOM 是浏览器渲染的实际 HTML 结构。它表示页面上所有且真正存在的元素节点。如果直接操作真实 DOM 会触发浏览器的重新渲染，尤其在数据频繁更新的情况下，这种操作开销较大。

· 区别：

效率：虚拟 DOM 是一个内存中的对象树，操作比真实 DOM 快得多，因为它不引起浏览器的渲染重排。

更新方式：虚拟 DOM 利用 diff 算法进行更新，只更改必要的节点；而真实 DOM 更新会触发浏览器渲染，成本较高。

DOM 是文档对象模型

BOM 是浏览器对象模型，BOM 的顶级对象是 window；BOM 比 DOM 更大，它包含 DOM。

window 对象的常见事件：窗口加载事件 window.onload、调整窗口大小事件 window.onresize、定时器 setTimeout() 和 setInterval() 等

网络

get 和 post 的区别

GET 和 POST 是 HTTP 协议中的两种常见请求方法，它们用于从服务器请求数据或将数据发送到服务器。主要区别如下：

① 用途：

GET 主要用于请求数据。它从服务器获取资源，通常用于读取数据而不改变服务器的状态（如访问网页内容 ）。

POST：主要用于提交数据。它将数据发送到服务器，并可能修改服务器上的资源（如提交表单 、创建新数据，多次提交订单会生成多个订单）。

② 数据传输方式 ：

GET：将数据附加在 URL 中，作为查询字符串 的一部分发送。URL 后的查询字符串以 ? 开头，各个参数通过 & 分隔。

POST：将数据放在请求的主体（body ）中，因此不会显示在 URL 上。数据可以包含更多的信息量和更复杂的结构。

③ 数据长度 ：

GET：URL 有长度限制（不同浏览器和服务器有不同限制，通常在 2000 字符左右），不适合传输大量数据。

POST：没有长度限制，适合传输大数据量。

④ 安全性 ：

GET：由于参数在 URL 中可见，敏感信息容易暴露，因此不适合发送敏感数据。

POST：相对更安全，因为数据在请求体中，虽然它仍然可以通过网络嗅探工具捕获，但不会直接暴露在 URL 中。搭配 HTTPS 提高安全性。

⑤ 浏览器缓存 ：

GET：浏览器会缓存 GET 请求，因此重复请求相同 URL 时会直接使用缓存结果。

POST：默认情况下不会缓存 POST 请求，通常每次都发送新的请求。

总结：GET：用于数据请求，数据放在 URL 中，有长度限制，适合读取操作。POST：用于数据提交，数据在请求体中，无长度限制，适合更新操作。

js 复制代码

Vue router 的传参方式：查询字符串和路径传递参数
查询字符串：/content -> http://localhost:5173/content?id=100&name=Lisa  
路径传递参数：/user/:id/name/:name/:number? -> http://localhost:5173/user/100/name/Lisa