前端模拟面试一面及答案
自我介绍
balabala
面试提问
- CSS 选择器的优先级
1. 样式表内部的 !important 规则
2. 内联样式（即在 HTML 元素中使用 style 属性的规则）
3. ID 选择器（即 #id 选择器）
4. 类选择器（即 .class 选择器）
5. 属性选择器（即 [attr] 选择器）
6. 伪类选择器（即 :pseudo-class 选择器）
7. 标签选择器（即 html 标签选择器）
8. 通用选择器（即 * 选择器）- 盒子模型介绍一下
标准盒子模型：
标准盒子模型是最常见的盒子模型，在这种模型下，一个元素的盒子由以下几部分组成：
内容：元素的实际内容，比如文本或图片
内边距（padding）：元素内容和边框之间的空隙
边框：元素的边框
外边距（margin）：元素和其他元素之间的空隙
怪异盒子模型：
怪异盒子模型是另一种盒子模型，在这种模型下，元素的宽度和高度是指包含内容、内边距和边框的整个盒子的宽度和高度，不包括外边距。
#some-element {
box-sizing: border-box;
}- js 基本数据类型有哪些
JavaScript 中的基本数据类型有以下几种：
字符串（string）：由一个或多个字符组成的文本序列，使用单引号或双引号括起来。例如：'hello' 或 "world"
数字（number）：包括整数和浮点数，无需使用引号括起来。例如：42 或 3.14
布尔值（boolean）：表示真假的值，只有两个值：true 或 false
null：表示一个空对象指针，代表没有对象
undefined：表示一个未定义的值
使用 Symbol 创建的唯一值 (symbol)
JavaScript 中的复杂数据类型包括：
数组 (array)
对象 (object)
函数 (function)
使用 Map 创建的键值对集合 (Map)
使用 Set 创建的唯一值集合 (Set)- Vue 生命周期，你介绍一下
Vue.js 的组件化开发模型中，每个 Vue 实例都有一组自己的生命周期函数。这些函数被调用时，会提供有限的机会在组件实例初始化和销毁时执行代码。
Vue 的生命周期分为以下几个阶段：
创建阶段（Creation Phase）：
beforeCreate: 在实例初始化之后，数据观测（data observer）和事件配置（event/watcher）之前调用
created: 实例已经创建完成之后调用
挂载阶段（Mounting Phase）：
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用
mounted: 在挂载完成之后调用：此时 DOM 已经更新，可以执行依赖于 DOM 的操作
更新阶段（Updating Phase）：
beforeUpdate: 在数据更新之前调用：发生在虚拟 DOM 打补丁之前
updated: 在数据更新之后调用：发生在虚拟 DOM 打补丁之后
销毁阶段（Destruction Phase）：
beforeDestroy: 在实例销毁之前调用
destroyed: 在实例销毁之后调用
通常，在 Vue 组件中使用生命周期函数，可以在组件初始化时进行一些设置，在组件销毁时清理
就绪阶段（Ready Phase）并不是 Vue 生命周期的一个正式阶段。它是一个概念性的概念，表示 Vue 实例已经创建完成，数据观测、事件和 watcher 都已经完成，并且已经挂载到真实 DOM 上。在这个阶段，Vue 实例已经可以被使用了。
就绪阶段通常发生在 Vue 实例的 created 钩子函数调用之后，也就是说，当 Vue 实例创建完成，数据观测、事件和 watcher 都已经被设置完成，就进入了就绪阶段。
就绪阶段并不是 Vue 生命周期的正式阶段，但是在开发中，我们常常会在这个阶段执行一些操作，比如发起 Ajax 请求获取数据，或者访问 DOM 元素等。
总的来说，Vue 生命周期的各个阶段提供了有限的机会，在组件的不同生命周期阶段执行特定的代码。使用生命周期函数，可以在组件的初始化和销毁时执行一些设置和清理工作。- v-if v-show 的区别，以及在项目中如何应用
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 只是简单地切换元素的 CSS property display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。- Vuex 状态丢失你遇到过吗，出现的原因以及如何解决
状态丢失的原因通常是因为 Vuex 状态是存储在内存中的，当用户刷新页面或关闭浏览器时，Vuex 状态会丢失。
为了解决这个问题，你可以使用浏览器的本地存储功能（如 localStorage 或 sessionStorage）来保存 Vuex 状态。这样，即使用户刷新页面或关闭浏览器，Vuex 状态也不会丢失。
---
本地存储（如 localStorage 和 sessionStorage）是浏览器提供的本地存储功能，它可以用来保存键值对，数据存储在浏览器中，并且在同一浏览器会话期间可供访问。这是一种简单的方法，但是数据的大小是有限的（一般为 5MB），并且不能跨浏览器会话（即关闭浏览器后数据就会丢失）。
另一种方法是将数据存储到 URL 地址栏（即查询字符串）中。这种方法可以跨浏览器会话，但是数据的大小也有限（一般为 2KB），并且数据不安全（因为它会明文显示在地址栏中）。
另一种方法是使用 IndexedDB，这是浏览器提供的可以存储大量结构化数据的本地数据库。IndexedDB 数据存储在浏览器中，并且可以跨浏览器会话保存，但是它需要更复杂的 API 来操作，并且不能跨域存储。
选择哪种方法取决于你的需求和偏好。如果你需要跨浏览器会话保存数据，并且数据量不大，那么本地存储或 URL 地址栏可能是最佳选择。如果你需要存储大量结构化数据，并且希望使用更复杂的 API 来管理数据，那么 IndexedDB 可能是最佳选择。
无论选择哪种方法，都要注意浏览器的兼容性。某些浏览器可能不支持某些功能，因此你可能需要使用特定的 polyfill 来兼容不支持的浏览器。
此外，你还可以使用 cookie 来保存 Vuex 状态。Cookie 是服务器发送到浏览器的小文件，浏览器会在每次请求时发送回服务器。Cookie 可以跨浏览器会话保存，但是数据的大小也有限（一般为 4KB），并且数据不安全（因为它会明文发送到服务器）。
另一种方法是使用服务端渲染（SSR），这样 Vuex 状态就会存储在服务器端，而不是在客户端，因此不会丢失。但是使用 SSR 需要更多的开发工作，并且对性能有一定的影响。
另一种方法是使用 API 服务来存储 Vuex 状态。这种方法通常需要将数据发送到远程服务器，然后在服务器端进行存储。这种方法可以跨浏览器会话保存数据，并且数据量也没有限制，但是需要更多的网络通信，并且可能会有安全问题。
总之，你需要根据你的需求和偏好来选择保存 Vuex 状态的方法。每种方法都有其优缺点，你需要权衡利弊，根据自己的应用场景选择最合适的方法。
此外，你还可以使用其他方法来保存 Vuex 状态，比如使用本地文件系统（如 Electron 应用）或使用更复杂的数据库（如 MySQL 或 MongoDB）。你还可以使用自定义的持久化方法，例如使用 WebSockets 或 WebRTC 进行数据同步。
总之，你有很多选择来保存 Vuex 状态，你需要根据自己的需求和偏好来选择最合适的方法。