132. 面试官：vite为什么比webpack快？

最新推荐文章于 2024-10-09 07:15:29 发布

伊泽瑞尔灬

最新推荐文章于 2024-10-09 07:15:29 发布

阅读量452

点赞数 9

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_30811721/article/details/134680312

版权

132期

1. vite为什么比webpack快？

2. vue3如何设置全局变量？

3. for in和for of的区别？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

131期问题及答案

1. Vue3.0里为什么要用ProxyAPI替代definePropertyAPI

Vue 3.0 引入 Proxy API 替代 Object.defineProperty API 的主要原因有几个：

更强大的功能： Proxy 提供了比 Object.defineProperty 更强大和灵活的拦截器机制。Proxy 允许你拦截更多的操作，包括对对象的读取、写入、删除等操作，而不仅限于属性的访问控制。
深度观测： Proxy 支持深度观测，这意味着当你修改嵌套对象的属性时，Vue 能够感知到这个变化。这在 Vue 3.0 中对响应式系统的改进是一个关键点。使用 Object.defineProperty 难以实现深度观测而且性能开销较大。
性能优势： Proxy 的性能通常比 Object.defineProperty 更好。Proxy 可以一次性监听整个对象，而 Object.defineProperty 则需要逐个遍历对象的属性进行设置。这使得 Proxy 在性能上具有潜在的优势，尤其是在处理大型对象时。
更友好的 API： Proxy 提供了更直观和友好的 API，使得定义和使用拦截器更加清晰和灵活。相较之下，Object.defineProperty 的使用和理解可能相对繁琐。
更好的 TypeScript 支持： Proxy 对于 TypeScript 有更好的支持，可以更方便地进行类型推导。

尽管 Proxy 提供了更多的优势，但也需要注意，它不支持 IE11 等一些老旧的浏览器。在一些需要兼容老旧浏览器的项目中，可能需要使用 polyfill 或者考虑其他替代方案。但随着现代浏览器的普及，这已经不再是一个主要的问题。总体来说，Vue 3.0 中采用 Proxy API 是为了提供更强大、更灵活、更高性能的响应式系统。

2. 什么场景下适合使用v-if，什么场景下适合使用v-show

v-if 和 v-show 都是 Vue 中用于条件性地渲染元素的指令，但它们适用的场景略有不同，具体取决于你的需求。

`v-if`：

惰性加载： 当你希望在条件为真时才会创建并挂载元素到 DOM 中，适合使用 v-if。因为 v-if 在条件为假时会销毁元素及其绑定的事件和子组件，这样可以减轻页面的初始加载负担。
频繁切换： 如果你的元素需要在不同条件之间频繁切换，而且这些条件之间的切换不是很频繁，适合使用 v-if。因为 v-if 的元素在条件为假时是完全不存在的，所以不会占用额外的 DOM 节点。
条件切换较少： 如果你有一个有多个条件需要切换的场景，而且这些条件之间的切换并不频繁，使用 v-if 可以更好地控制元素的生命周期。

`v-show`：

初始渲染性能： 如果元素在初始渲染时几乎总是可见的，而且你希望在条件为假时保留元素的 DOM 结构和状态，适合使用 v-show。因为 v-show 只是简单地通过 CSS 控制元素的显示与隐藏，不会在条件为假时销毁和重新创建元素。
切换频繁： 如果你需要在条件为真和条件为假之间频繁切换，而且你希望保留元素的状态和避免重新渲染，适合使用 v-show。因为 v-show 不会影响元素的生命周期，不会导致销毁和重新创建。
元素在 DOM 中一直存在： 如果你希望即使在条件为假时元素仍然保留在 DOM 中（不销毁），适合使用 v-show。

总的来说，v-if 适合在条件切换不频繁的情况下，用于惰性加载和减轻初始渲染负担。而 v-show 适合在条件切换频繁、需要保留元素状态和 DOM 结构的场景。选择合适的指令取决于具体的使用情况和性能考虑。

3. 2个相邻元素之间，有看不见的空白间隔，是什么原因引起的，如何解决？

在 HTML 和 CSS 中，有时相邻元素之间出现看不见的空白间隔是由于文本节点（Text Node）造成的，这些文本节点包含了换行符、空格或制表符等。这些文本节点会被解释为空白字符，导致相邻元素之间有间隔。

解决这个问题的方法有几种：

移除换行符和空格： 你可以通过删除 HTML 代码中相邻元素之间的换行符、空格或制表符来消除这些空白间隔。
```
<div></div><div></div>
```
或者使用注释来占位：
```
<div></div><div></div>
```
设置 font-size: 0： 在父元素上设置 font-size: 0;，这样文本节点中的空白字符也会变得不可见。然后，为实际的文本内容设置合适的 font-size。
```
.parent {
  font-size: 0;
}

.child {
  font-size: 16px; /* 或者其他合适的值 */
}
```
使用 Flexbox 或 Grid 布局： 使用 Flexbox 或 Grid 布局时，浏览器会自动消除相邻元素之间的空白间隔。
```
.container {
  display: flex; /* 或者 display: grid; */
}

.item {
  flex: 1;
}
```