面试题系列均来自鱼皮的知识星球——编程导航

Vue Router 的 $route 和 $router 对象有什么区别？

在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，但它们的作用不同。

$route 对象代表着当前激活的路由信息，它包含了当前 URL 解析得到的信息，如当前路径、参数、查询参数等。$route 对象是一个只读对象，我们无法通过改变 $route 对象来改变当前路由。

$router 对象则是 Vue Router 的实例对象，它负责管理整个路由的状态，包括当前路径、路由参数、路由切换等。$router 对象可以通过编程的方式来改变当前路由，如通过 $router.push()、$router.replace()、$router.go() 等方法。

总的来说，$route 对象是获取当前路由信息的方式，$router 对象则是控制当前路由状态的方式。

介绍下从 HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程，各个阶段相对前一阶段做了哪些优化

HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程主要是为了解决 HTTP 协议在网络传输过程中出现的一些问题，提高网络传输效率和性能。

HTTP/1.0 是最早的 HTTP 协议，它使用一条长连接（keep-alive）传输一个请求和响应，存在以下问题：

  • 队头阻塞问题：因为只有一个连接，所以如果有一个请求被阻塞，后续请求也会被阻塞。
  • 无法多路复用：只能按顺序传输一个请求和响应，无法同时传输多个请求和响应。
  • 每次请求需要新建连接：每次请求都需要新建连接，连接的建立和关闭过程会消耗时间。

HTTP/1.1 引入了以下优化：

  • 持久连接：即连接重用，通过一个 TCP 连接传输多个请求和响应，减少了连接建立和关闭的时间。
  • 分块传输编码（chunked）：把响应数据分成多个块，每个块前面加上长度信息，便于客户端逐步接收。
  • 虚拟主机（Virtual Host）：通过在请求头中添加 Host 字段来区分不同的主机。

HTTP/2 引入了以下优化：

  • 多路复用：允许同时通过同一个连接并行传输多个请求和响应，解决了队头阻塞问题。
  • 二进制分帧：将传输的数据分成一个个二进制帧，每个帧都有自己的 ID，可以独立传输，解决了队头阻塞问题，提高了传输效率。
  • 头部压缩：使用 HPACK 算法对头部信息进行压缩，减少了头部信息的传输量。

HTTP/3 引入了以下优化：

  • QUIC 协议：使用 QUIC 协议替代 TCP，支持更快的连接建立和更快的重传，能够解决 TCP 队头阻塞和 TCP 握手延迟的问题。
  • 数据流分离：将一个连接分成多个数据流，每个数据流都有独立的 ID，可以独立控制和传输数据。

总的来说，HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程主要是从连接的角度进行了优化，提高了并发能力和传输效率，提高了用户体验。

什么是 CSS 工程化？你用过哪些相关的工具？

CSS 工程化是指将 CSS 在项目中进行模块化、组件化、可维护性、可重用性等方面的处理，以达到工程化管理 CSS 的目的。

在 CSS 工程化中，通常会使用一些相关的工具来辅助管理 CSS，常用的工具包括：

  1. CSS 预处理器：如 Sass、Less、Stylus 等，可以通过变量、函数、混合等方式，提高 CSS 的可维护性和可重用性。
  2. CSS 后处理器：如 PostCSS，可以用来处理 CSS 代码，通过插件的形式可以实现一些自动化处理，如自动添加前缀、压缩 CSS 等。
  3. CSS 模块化工具：如 CSS Modules、styled-components 等，可以将 CSS 样式与组件代码结合在一起，提高 CSS 的可维护性和可重用性。
  4. CSS 命名规范：如 BEM、SMACSS、OOCSS 等，可以通过规范化 CSS 的命名方式，提高 CSS 的可读性和可维护性。

通过使用这些工具，可以提高 CSS 的可维护性、可重用性和可读性，从而使得前端开发更加高效、简洁。