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 不缓存结果，数据变化时总会触发回调。
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：用于数据提交，数据在请求体中，无长度限制，适合更新操作。
Vue router 的传参方式：查询字符串和路径传递参数
查询字符串：/content -> http://localhost:5173/content?id=100&name=Lisa
路径传递参数：/user/:id/name/:name/:number? -> http://localhost:5173/user/100/name/Lisa
