> 今日问题：Vue和React的Diff算法的区别？





Q：如果在前端面试中，被问到Vue和React的Diff算法的区别，怎么回答比较好，全面具体一些，越详细越好

A：Vue和React的Diff算法，都是忽略跨级比较，只做同级比较，以降低算法的时间复杂度。但是它们在一些细节上有不同的处理方式，主要有以下几个方面：

- **节点类型的判断**
    - Vue在比对节点时，会先判断节点的key和type是否相同，如果不同，则直接删除旧节点，创建新节点。
    - 而React会先判断节点的key是否相同，如果相同，再判断type是否相同，如果不同，则只是修改节点的属性。这样，React可以复用一些节点，减少DOM操作，但是也可能导致一些意想不到的问题。
- **节点移动的方向**
    - Vue的列表比对，采用从两端到中间的比对方式，也就是双端Diff，这样可以有效地处理节点的移动和交换。
    - 而React则采用从左到右依次比对的方式，也就是单端Diff，这样可以简化算法的逻辑，但是也可能导致一些不必要的节点删除和创建。
- **Diff算法的优化**
    - Vue3在Vue2双端Diff的基础上，加上了最长递增子序列（LIS）优化算法，这样可以找出需要移动的最少节点数量，进一步提高Diff的效率 。
    - 而React则没有使用LIS算法，而是使用了一些启发式的方法，比如跳过没有key的节点，或者跳过相同类型的节点。

Vue和React的Diff算法区别

> 今日问题：Vue2和Vue3的区别？




Q：如果在前端面试中，被问到，如何理解Vue2和Vue3的区别，怎么回答比较好，全面具体一些，越详细越好

A：Vue2和Vue3是Vue框架的两个版本，它们之间有很多区别和改进，主要包括以下几个方面：

- **数据响应式**
    - Vue2使用了Object.defineProperty方法来实现数据响应式，但是这种方式存在一些限制，比如无法监听数组下标变化，需要使用特殊的方法来处理。
    - 而Vue3使用了ES6中的Proxy来实现数据响应式，解决了Vue2存在的问题，并且性能更高。

- **组合式API**
    - Vue2使用了Options API来组织代码，这种方式将组件的逻辑分散在不同的选项中，比如data, methods, computed等，导致逻辑复用和维护困难。
    - 而Vue3提供了组合式API，这种方式使用setup函数来创建响应式变量和函数，并使用ref, reactive, computed等函数来管理状态，使得代码更加清晰和可读。

- **性能优化**
    - Vue3在Vue2的基础上进行了很多性能优化，包括虚拟DOM的重写，编译模板的优化，更高效的组件初始化，update性能提高1.3~2倍，SSR速度提高了2~3倍。

- **打包体积变化**
    - Vue2的运行时打包大小是23k，但是这只是没有安装依赖的时候，随着依赖包和框架特性的增多，有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还很大。
    - 而Vue3通过将大多数全局API和内部帮助程序移动到Javascript的module.exports属性上实现了树摇，这允许现代模式下的模块打包器能够静态地分析模块依赖关系，并删除与未使用的module.exports属性相关的代码。尽管增加了许多新特性，但Vue3被压缩后的基线大小约为10KB，不到Vue2的一半。

- **其他API和功能的改动**
    - Vue3还对一些全局API，模板指令，组件，渲染函数等进行了修改或增加，比如移除了filters，增加了renderTracked和renderTriggered两个生命周期，增加了Teleport和Suspense两个内置组件等。

Vue2和Vue3的区别

> 最近AI的疯狂席卷了美股、A股和加密市场，Sora模型的发布，除了让英伟达股价创新高，也让加密市场也获益良多，最直接的就是OpenAI CEO发布的世界币World Coin，在近期一周时间内涨了接近200%。甚至总市值超过了OpenAI的估值？？？





![image.png](https://creatorblog.cn/static/img/04c25d1f6327ecdcd23927250986a527.image.webp)

根据2月22日最新的行情，WLD报价8.8$一枚，最大供应量是100亿枚，所以完全稀释的市值是接近880亿美元。


![image.png](https://creatorblog.cn/static/img/4b09b8238607c77065ee0fc1ce2392d7.image.webp)

而OpenAI目前市场估值也才800亿美元而已。

这是一件非常非常疯狂的事情。那些看多WLD到10刀、50刀甚至100刀的，建议注意一下目前WLD目前的总市值，而且建议去看一下WLD的白皮书，可以疯狂，但是不要幻想。

现在WLD的流通只有1.33%，这意味着，随时都会有砸盘的可能，除了WLD本身一直存在的免费空投，它也会不定时的将代币分发给早期投资者以及做市商。抛压是巨大的，它流通只有不到2%呀！！！不要有太多幻想，镰刀割起来都是连根拔。


虽然OpenAI的这个800亿美元估值很假，市场都知道，想买OpenAI是个天文数字，800亿是糊弄鬼的，但是市场目前的估值报价确实是这个数，得承认，在数据面做参考。

WLD近期的快速上涨，主要就是得益于OpenAI发布的sora模型，然后引来很多的巨鲸建仓，有情绪冲动。

所以，如果明天sora出现一些不好的负面消息，或者抛压太大，随时都可能腰斩的。

我对10刀这个关口持开放态度，冲一冲还有可能上去，但是如果10刀再往上，起码在现阶段，是不可能持续的。

WLD这个代币相比于其它AI系的代币，在很长很长的时间都见不到它的实际作用，你甚至可以拿它当Meme看，它的涨跌和OpenAI的消息密切相关，所以仓位一定不要重，而且很不建议做长线。


AI系代币最近都普涨，一些头部龙头，比如RDNR可以长期持有，这轮牛市肯定有炒AI的份额，还是建议龙头战法，小币种做短线。我甚至在OKX的人工智能分类里看到了AIDoge，你就能想到目前谁都想沾点边，但是真正沾边、且有实际内容的AI代币并不多。

WLD总市值超越OpenAI估值？

> 今日问题：强缓存和协商缓存?




Q：如果在前端面试中，被问到强缓存和协商缓存，怎么回答比较好，全面详细一点，越详细越好？

A：在前端面试中，被问到强缓存和协商缓存时，可以这样回答：

1. 强缓存：

- 强缓存是指浏览器在请求资源时，直接从本地缓存中获取资源，并不发起请求到服务器。
- 判断是否使用强缓存是通过比较请求时的时间与资源的过期时间（或者缓存有效时间）来决定的。
- 常见的强缓存控制字段有 Expires 和 Cache-Control。
- Expires：是服务器响应消息头字段，表示资源的到期时间，是一个绝对时间，即具体的过期日期。
- Cache-Control：是 HTTP/1.1 提供的更灵活的缓存控制方式，包含多个指令，如 max-age 表示资源的最大缓存时间，单位是秒。

2. 协商缓存：

- 协商缓存是指浏览器在请求资源时，会向服务器发送请求，服务器根据资源的最后修改时间或者唯一标识符（ETag）等信息来判断是否命中缓存。
- 如果资源未发生变化，则返回 304 Not Modified 状态码，浏览器从本地缓存中加载资源；否则返回新的资源和 200 OK 状态码。
- Last-Modified / If-Modified-Since：服务器响应消息头字段 Last-Modified 表示资源的最后修改时间，浏览器再次请求资源时会发送 If-Modified-Since 字段，表示资源的上次请求时间。
- ETag / If-None-Match：服务器响应消息头字段 ETag 是资源的唯一标识符，浏览器再次请求资源时会发送 If-None-Match 字段，包含上次请求的 ETag 值。

3. 优缺点对比：

- 强缓存：
    - 优点：减少了网络请求，加快页面加载速度，节省带宽资源。
    - 缺点：资源过期后仍然可能存在过时数据，需要等待下一次缓存更新。

- 协商缓存：
    - 优点：能够准确判断资源是否发生变化，节省了不必要的数据传输。
    - 缺点：需要向服务器发送请求，增加了网络延迟。

4. 使用场景：

- 强缓存适用于静态资源，如图片、样式表、脚本等，这些资源在一定时间内不会发生变化。
- 协商缓存适用于动态内容或者频繁更新的资源，如接口数据、动态页面等，可以根据资源的变化情况决定是否返回新的数据。

5. 缓存验证策略：

- 强缓存失效后，浏览器会发送请求到服务器，服务器根据资源的修改时间或者唯一标识符来验证资源是否发生变化。
- 如果资源未发生变化，则返回 304 Not Modified 状态码，浏览器从本地缓存加载资源；否则返回新的资源和 200 OK 状态码。

综上所述，强缓存和协商缓存各有其优缺点和适用场景，合理使用可以提高页面加载速度和用户体验。

强缓存和协商缓存

> 今日问题：css隐藏元素有哪些方法？




Q：如果在前端面试中，被问到css隐藏元素有哪些方法，怎么回答比较好，全面详细一点，尽量把所有方法都列出来并说明优缺点？

A：在前端面试中，当被问到 CSS 隐藏元素的方法时，你可以全面详细地列出以下常用方法：

1. display: none;

- 这是最常用的隐藏元素的方法之一。
- 设置元素的 display 属性为 none 将会使元素不显示，并且不占据页面布局空间。
- 优点：
    - 完全隐藏元素，不占据页面布局空间。
    - 易于实现，语义明确。

- 缺点：
    - 元素隐藏后，无法通过 CSS 或 JavaScript 直接触及。

```css
.element {
    display: none;
}
```

2. visibility: hidden;

- 使用 visibility 属性可以隐藏元素，但是元素在页面中仍然占据布局空间。
- 元素的尺寸和位置仍然保留，只是内容不可见。
- 优点：
    - 元素隐藏后，仍然占据页面布局空间。
    - 元素尺寸和位置保持不变，对页面布局影响较小。

- 缺点：
    - 对于完全隐藏元素，不适用。
    - 元素虽然不可见，但仍然可被键盘焦点和鼠标事件访问到。

```css
.element {
    visibility: hidden;
}
```

3. opacity: 0;

- 设置元素的 opacity 属性为 0 可以使元素不可见，但是仍然占据页面布局空间。
- 优点：
    - 元素透明度设置为 0，不可见但仍然占据页面布局空间。
    - 元素保留在文档流中，对布局影响较小。

- 缺点：
    - 元素仍然可以接收用户的交互事件，因为它仍然存在于页面上。

```css
.element {
    opacity: 0;
}
```

4. position: absolute;

- 将元素的 position 属性设置为 absolute 或 fixed，并且将其移出屏幕可视区域以隐藏元素。
- 优点：
    - 可以将元素移出屏幕可视区域，完全隐藏元素。
    - 可以使用动画效果来实现元素的显示与隐藏。

- 缺点：
    - 需要手动调整位置，不够灵活，可能会影响其他元素的布局。

```css
.element {
    position: absolute;
    left: -9999px; /* 移出屏幕左侧 */
    /* 或 */
    top: -9999px; /* 移出屏幕顶部 */
}
```

5. clip-path: polygon(0 0, 0 0, 0 0, 0 0);

- 使用 clip-path 属性可以定义一个裁剪区域，将超出此区域的部分裁剪掉，从而达到隐藏元素的效果。
- 优点：
    - 可以定义复杂的裁剪区域，实现不规则形状的隐藏效果。

- 缺点：
    - 部分浏览器支持不完全，跨浏览器兼容性需要考虑。

```css
.element {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 定义一个不可见的裁剪区域 */
}
```

6. height: 0; width: 0; overflow: hidden;

- 将元素的高度和宽度都设置为 0，并且隐藏溢出内容。
- 优点：
    - 使用 CSS 属性设置高度和宽度为 0，隐藏元素。
    - 不影响页面布局。

- 缺点：
    - 无法完全隐藏元素的内容，仍然可被访问到。

```css
.element {
    height: 0;
    width: 0;
    overflow: hidden;
}
```

7. transform: scale(0);

- 使用 transform 属性的 scale 函数将元素缩放至不可见。
- 优点：
    - 可以使用 CSS 动画来实现渐变式的显示与隐藏效果。

- 缺点：
    - 元素虽然不可见，但仍然占据页面布局空间，可能会影响其他元素的布局。

```css
.element {
    transform: scale(0);
}
```

8. z-index: -1;

- 将元素的 z-index 设置为负值，使其在屏幕的下方，从而隐藏元素。
- 优点：
    - 可以将元素放置在页面的下方，实现隐藏效果。
- 缺点：
    - 仅适用于绝对定位或固定定位的元素。
    - 其他元素可能会覆盖该元素，需要谨慎使用。

```css
.element {
    z-index: -1;
}
```

9. visibility: collapse; (仅适用于表格元素)

- 对于表格中的行或列，可以使用 visibility: collapse; 来隐藏。
- 不同于 visibility: hidden;，collapse 只适用于表格元素。
- 优点：
    - 适用于表格元素的行或列的隐藏，保留表格结构。

- 缺点：
    - 仅适用于表格元素。
    - 对于非表格元素，无法使用该方法隐藏。

```css
tr.hidden-row {
    visibility: collapse;
}
```

这些是常见的 CSS 隐藏元素的方法，你可以根据具体的情况选择合适的方法。

css隐藏元素有哪些方法

欢迎来到我的博客，这里是我分享前端、web3、理财、互联网等方面的知识和心得的地方。我是一名热爱编程的前端程序员，我希望通过我的博客能够帮助更多的人学习和进步。在这里，你可以找到最新最实用的前端技术教程，了解最前沿的互联网动态和趋势，掌握最有效的理财方法和策略。我也会不定期地发布一些个人项目和作品，展示我的创意和能力。如果你对我的博客感兴趣，欢迎你留言、评论、收藏、关注，也可以通过邮箱或社交媒体与我联系，交流学习和合作。谢谢你的支持！