前端面试题（一部分）

vue中的生命周期钩子有哪些

beforeCreate：
在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
在此阶段，实例的属性和方法还未初始化。
created：
在实例创建完成后被立即调用。
可以访问实例的属性和方法，但无法访问到 DOM 元素。
beforeMount：
在挂载开始之前被调用。
在此阶段，模板编译完成，但尚未将编译结果挂载到 DOM 中。
mounted：
在挂载完成后被调用。
可以访问到挂载的 DOM 元素，可以进行 DOM 操作。
beforeUpdate：
在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前。
在此阶段，可以对更新前的状态进行修改。
updated：
在数据更新之后被调用，发生在虚拟 DOM 重新渲染和打补丁之后。
可以进行 DOM 操作，但要避免无限循环的更新。
beforeDestroy：
在实例销毁之前调用。
在此阶段，实例仍然完全可用。
destroyed：
在实例销毁之后调用。
所有的事件监听器会被移除，所有的子实例也会被销毁。

面试题：react、vue中的key有什么作用？（key的内部原理） ​

1.虚拟DOM中key的作用：
​ key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

​

​ 2.对比规则：

​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 创建新的真实DOM，随后渲染到到页面。

​

​ 3. 用index作为key可能会引发的问题：

​

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

​ 2. 如果结构中还包含输入类的DOM：

​ 会产生错误DOM更新 ==> 界面有问题。

​ 4. 开发中如何选择key?:

​

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

​ 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

​ 使用index作为key是没有问题的。

模块化发展历程

可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、

模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。

IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

AMD：使用 requireJS 来编写模块化，特点：依赖必须提前声明好。

**CMD：**使用 seaJS 来编写模块化，特点：支持动态引入依赖文件。

**CommonJS：**nodejs 中自带的模块化。

**UMD：**兼容 AMD，CommonJS 模块化语法。

**webpack(require.ensure)：**webpack 2.x 版本中的代码分割。

**ES Modules：**ES6 引入的模块化，支持 import 来引入另一个 js 。

Cookie、sessionStorage、localStorage 的区别
共同点：都是保存在浏览器端，并且是同源的

**Cookie：**cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

**sessionStorage：**仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

**localStorage：**localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

link 与 @import 的区别
link是 HTML 方式， @import是 CSS 方式

link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC

link可以通过rel="alternate stylesheet"指定候选样式

浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式

@import必须在样式规则之前，可以在 css 文件中引用其他文件

总体来说：link 优于@import

router和route有什么区别
Router（路由器）：路由器是一种网络设备，用于在计算机网络中转发数据包。它连接多个网络，并根据目标地址来确定数据包的最佳路径，以便将其从源网络发送到目标网络。路由器通常用于在互联网中转发数据。

Route（路由）：路由是指在网络中定义的路径，用于将数据包从源地址发送到目标地址。路由是由网络管理员配置的，它指定了数据包在网络中的传输路径。路由可以基于不同的因素进行选择，例如最短路径、最快路径或特定的网络策略。

Vue 的双向数据绑定的原理
Vue 的双向数据绑定是通过使用 Object.defineProperty() 方法来实现的。

当 Vue 实例化时，Vue 会遍历 data 对象中的属性，并使用 Object.defineProperty() 将每个属性转换为 getter 和 setter。这样，当数据属性被读取或修改时，Vue 就能够捕获到，并触发相应的更新。

具体的实现步骤如下：

Vue 遍历 data 对象中的属性。
对于每个属性，Vue 使用 Object.defineProperty() 将其转换为 getter 和 setter。
在 getter 中，Vue 将属性的值返回给调用者，并进行依赖收集。这意味着 Vue 会追踪每个属性的依赖关系，以便在属性发生变化时，能够通知相关的组件进行更新。
在 setter 中，Vue 接收到属性的新值，并将其存储起来。然后，Vue 会触发相应的更新，通知相关的组件进行重新渲染。
通过这种方式，Vue 实现了双向数据绑定。当数据发生变化时，视图会自动更新；当用户与视图进行交互时，数据也会自动更新。

css定位有哪几种

静态定位（Static Positioning）：
默认的定位方式。
元素按照文档流正常排列，不受其他定位方式的影响。
使用 position: static; 来指定静态定位。
相对定位（Relative Positioning）：
相对于元素自身在文档流中的位置进行定位。
元素仍然占据原来的空间，不会影响其他元素的位置。
使用 position: relative; 来指定相对定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
绝对定位（Absolute Positioning）：
相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块（通常是 元素）进行定位。
元素脱离文档流，不占据空间，可以覆盖其他元素。
使用 position: absolute; 来指定绝对定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。
固定定位（Fixed Positioning）：
相对于浏览器窗口进行定位，固定在屏幕上的位置不变。
元素脱离文档流，不占据空间，始终可见。
使用 position: fixed; 来指定固定定位，并可以通过 top 、 right 、 bottom 和 left 属性来调整元素的位置。

js 中 BOM和DOM的区别

BOM是浏览器对象模型，它提供了一组对象和方法，用于操作浏览器窗口和浏览器本身的属性。BOM包括了window对象，它代表浏览器窗口，提供了许多方法和属性，如alert()、setTimeout()、location等。

DOM是文档对象模型，它提供了一组对象和方法，用于操作HTML或XML文档的内容和结构。DOM可以将HTML或XML文档表示为一个树状结构，每个节点都是一个对象，可以通过DOM API来访问和修改这些节点。DOM提供了一系列的方法和属性，如getElementById()、appendChild()、innerHTML等。

BOM是用来操作浏览器窗口和浏览器本身的属性，而DOM是用来操作文档结构和内容的。
BOM提供了一些与浏览器交互的方法和属性，如弹窗、重定向等，而DOM提供了一些用于操作HTML或XML文档的方法和属性，如获取元素、修改内容等。
BOM是浏览器厂商根据W3C标准之外的补充，不同浏览器实现可能有差异，而DOM是W3C标准定义的，不同浏览器实现应该保持一致性。
总的来说，BOM是操作浏览器窗口和浏览器本身的属性，而DOM是操作HTML或XML文档的内容和结构。

什么是防抖 什么是节流

防抖：
防抖是指在事件触发后，等待一段时间后再执行回调函数。如果在等待时间内又发生了相同的事件，那么就会重新计时。防抖的主要目的是减少函数的执行次数，尤其是在频繁触发事件的情况下，可以避免函数多次执行。常见的应用场景包括输入框的搜索建议、窗口大小改变的回调等。

例如，当用户在输入框中输入关键字时，可以使用防抖来减少发送请求的次数，只有在用户停止输入一段时间后才发送请求。

节流：
节流是指在一段时间内只执行一次回调函数。即使在这段时间内发生了多次事件，也只会执行一次回调函数。节流的主要目的是控制函数的执行频率，尤其是在高频率触发事件的情况下，可以限制函数的执行次数。常见的应用场景包括滚动事件、鼠标移动事件等。

例如，当用户滚动页面时，可以使用节流来限制触发回调函数的次数，避免频繁执行导致性能问题

vue中事件的修饰符有哪些

.stop：阻止事件冒泡。
.prevent：阻止事件的默认行为。
.capture：使用事件捕获模式，即在父组件上监听事件，而不是在子组件上。
.self：只有当事件是由当前元素本身触发时才触发事件处理函数，不包括子元素。
.once：事件只触发一次，之后自动移除事件监听器。
.passive：指示浏览器在滚动事件上不需要执行preventDefault()，可以提升滚动性能。
.native：监听组件根元素的原生事件，而不是组件自身触发的事件。
.keyCode：只当事件是从特定键触发时才触发事件处理函数。
.exact：要求精确匹配修饰符。
.left：只当点击鼠标左键时才触发事件处理函数。
.right：只当点击鼠标右键时才触发事件处理函数。
.middle：只当点击鼠标中键时才触发事件处理函数。

GET POST请求方式什么区别?

数据传输位置：GET请求将数据附加在URL的查询参数中，而POST请求将数据包含在请求体中。
数据传输安全性：GET请求的数据暴露在URL中，因此不适合传输敏感信息。POST请求的数据在请求体中，相对更安全。
数据传输长度限制：GET请求的URL长度有限制，不同浏览器限制不同，通常为2048个字符。POST请求的数据没有长度限制。
数据传输语义：GET请求用于获取资源，不应该有副作用，即对服务器数据没有修改的操作。POST请求用于提交数据，可能对服务器数据进行修改。
请求可缓存性：GET请求默认可以被缓存，而POST请求默认不会被缓存。
请求使用场景：GET请求适合获取数据，如获取网页内容、查询数据等。POST请求适合提交数据，如提交表单、上传文件等。