Vue真实技术面试题解析【兄弟组件、vue-router、增量部署】

兄弟组件的传值方式，有两种方式，把你尽可能知道的告诉我

我的答案：使用父组件传值 和 状态管理传值

• 使用事件总线（Event Bus）：创建一个空的 Vue 实例作为事件总线，在其中定义事件和对应的处理函数，然后在需要传值的组件中使用 $emit 触发事件，并在接收值的组件中使用 $on 监听事件来获取传递的值。这种方式适用于任意组件之间的通信，但是需要手动管理事件的注册和销毁，否则可能会造成内存泄漏³⁴。
• 使用 Vuex（状态管理）：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它可以将组件的共享状态抽取出来，以一个全局单例模式管理。在 Vuex 中，每个组件都可以通过 mapState，mapGetters，mapActions，mapMutations 等辅助函数来访问或修改全局状态，从而实现组件之间的数据传递。这种方式可以方便地管理应用的状态，但是也会增加应用的复杂度，不适合小型项目⁵。

参考链接：
(1) vue兄弟组件传值的3种方法_mrsun_web的博客-CSDN博客
(2) Vue组件传值——兄弟组件传值_vue页面传值如何接收值放到表单上-CSDN博客
(3) vue兄弟组件之间传值和方法调用_vue调用兄弟组件中的方法,并传参-CSDN博客
(4)vue组件（父子，兄弟，爷孙，）之间传值 - 掘金 (juejin.cn)
(5) 【Vue3】20-兄弟组件传值 - 掘金 (juejin.cn)

Echarts随着浏览器大小变化，如何操作？

我的回答：直接监听size大小变化，再次调用
Echarts 随着浏览器大小变化，有一个简单的方法可以实现图表的自适应，就是使用 resize 方法。这个方法可以在浏览器窗口大小改变时，自动调整图表的宽度和高度，以适应新的尺寸。具体的操作步骤如下：

• 在创建图表实例时，使用 autoResize 选项，设置为 true，表示开启自适应功能。
• 在图表容器的样式中，设置 width 和 height 为 100%，表示占满父元素的宽度和高度。
• 在 window 对象上，添加 resize 事件监听器，当窗口大小改变时，调用图表实例的 resize 方法，重新渲染图表。

下面是一个简单的示例代码：

  // 获取图表容器
  var chartContainer = document.getElementById('chart');

  // 创建图表实例，开启自适应功能
  var chart = echarts.init(chartContainer, null, {autoResize: true});

  // 设置图表的配置项和数据
  var option = {
    // 省略...
  };

  // 设置图表的配置项和数据
  chart.setOption(option);

  // 在窗口大小改变时，调用图表的 resize 方法
  window.addEventListener('resize', function () {
    chart.resize();
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

参考链接：
(1) Apache ECharts
(2) Echarts实现随容器大小改变实时更新大小及采坑记录 - 掘金 (juejin.cn)
(3) 特性 - Apache ECharts
(4) 【精选】ECharts实现数据可视化入门教程（超详细）_牛哄哄的柯南的博客-CSDN博客
(5) ECharts 教程 | 菜鸟教程 (runoob.com).

Vue-router的有几种模式？

我的答案：两种，hash模式和history模式

Vue-Router 有两种模式：哈希模式和历史模式

• 哈希模式：不会包含在 HTTP 请求中，不会重新加载页面，
• 历史模式：需要和后端配合，前端的 URL 和后端发起请求的 URL 需要一致

1. Vue-Router 默认使用哈希模式，可以通过配置 mode: ‘history’ 来使用历史模式
2. 哈希模式使用 URL 的 hash 来模拟完整的 URL，当 hash 发生变化时，不会导致浏览器向服务器发出请求，而历史模式是通过调用 window.history 对象上的方法来实现页面的无刷新跳转

参考链接：
(1) vue-router路由模式有几种？_vuerouter路由有几种-CSDN博客
(2) vue-router路由有几种模式？说说它们的区别？_smouns_的博客-CSDN博客
(3) Vue Router | Vue.js 的官方路由 (vuejs.org)
(4) vue路由的三种模式 - 掘金 (juejin.cn)

使用history模式时候，刷新404问题

我的回答：我们的解决方法是通过配置nginx完成

使用 history 模式时候，刷新 404 问题是一个常见的 Vue 路由问题。

它的原因是在 history 模式下，URL 是正常的，没有哈希值，当用户直接访问某个子路径时，浏览器会向服务器发送请求，如果服务器没有配置相应的路由规则，就会返回 404 错误。为了解决这个问题，有以下几种方法：

• 在服务器端配置一个覆盖所有情况的候选资源，即如果 URL 匹配不到任何静态资源，就返回同一个 index.html 页面，这个页面就是 Vue 应用的入口页面。这样，无论用户访问什么路径，都会返回 index.html，然后由 Vue 路由来处理。不同的服务器有不同的配置方式，可以参考官方文档中的示例¹。

• 在 Vue 应用中定义一个通配符路由，即匹配所有路径的路由，用来显示一个 404 页面，提示用户访问的路径不存在。这样，当用户访问一个不存在的路径时，不会看到服务器返回的 404 错误，而是看到 Vue 应用自定义的 404 页面。例如，可以在路由配置中添加如下代码²：

  const router = new VueRouter({
    mode: 'history',
    routes: [
      { path: '*', component: NotFoundComponent }
    ]
  })
  1
  2
  3
  4
  5
  6

• 如果使用 Node.js 服务器，可以使用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。这样，当用户访问一个不存在的路径时，会看到服务器返回的 404 错误，而不是 Vue 应用的入口页面。这种方法需要在服务端定义和 Vue 应用一致的路由规则，以避免不一致的情况³。

参考链接
(1) 一文搞懂Vue history模式打包刷新页面404问题 - 掘金 (juejin.cn)
(2) 新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题 - 知乎 (zhihu.com)
(3) vue路由history模式刷新页面出现404问题 - UCloud云社区
(4) 解决Vue中使用history路由模式出现404的问题_vue history 404_NetRookieX的博客-CSDN博客
(5) history模式下页面刷新404问题 - Lencamo - 博客园 (cnblogs.com)
(6) 不同的历史模式 | Vue Router (vuejs.org)

描述一下本地存储

我的答案：localStore和sessionstore

本地存储是一种在用户浏览器中保存数据的技术，它可以让网页应用在不依赖服务器的情况下，实现数据的持久化和共享。本地存储有以下几个特点：

• 本地存储的数据是按照 起源地（origin） 来划分的，也就是说，不同的域名和协议下的网页不能互相访问本地存储的数据。
• 本地存储的数据只能是 字符串类型，如果要存储其他类型的数据，需要使用 JSON.stringify() 和 JSON.parse() 方法进行转换。
• 本地存储的数据不会随着浏览器的关闭而消失，除非用户主动删除或者浏览器清理缓存。
• 本地存储的容量一般比较大，一般在 5MB 到 20MB 之间，不同的浏览器有不同的限制。

本地存储主要有两种方式，分别是 localStorage 和 sessionStorage。它们的区别在于：

• localStorage 存储的数据没有过期时间，可以长期保存在浏览器中，除非用户或者网页主动删除。
• sessionStorage 存储的数据只在当前会话（session）中有效，当用户关闭浏览器或者标签页时，数据会被清除。

本地存储的使用方法很简单，可以通过以下的代码来实现：

  // 存储数据
  localStorage.setItem('name', 'Alice');
  sessionStorage.setItem('age', '18');

  // 获取数据
  var name = localStorage.getItem('name');
  var age = sessionStorage.getItem('age');

  // 删除数据
  localStorage.removeItem('name');
  sessionStorage.removeItem('age');

  // 清空数据
  localStorage.clear();
  sessionStorage.clear();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考链接
(1) HTML 本地存储 (w3school.com.cn)
(2) Window.localStorage - Web API 接口参考 | MDN (mozilla.org)
(3)前端本地存储之LocalStorage - 掘金 (juejin.cn)

工程当中，Vue是怎么做增量部署的？

我扯了一下动态路由

增量部署是一种部署方式，它的目的是在每次部署过程中，只更新和发布变化的部分，而不是整个项目，从而提高部署的效率和稳定性。增量部署的优点有：

• 减少部署的时间和资源消耗，提高部署的速度和质量。
• 减少部署的风险和影响范围，避免因为全量部署而导致的系统不可用或者功能异常。
• 增加部署的灵活性和可控性，可以根据不同的需求和场景，选择合适的部署策略和方式。

Vue 项目的增量部署，一般需要以下几个步骤：

• 利用代码管理工具（如 Git）提取两个版本之间的增量，并结合其他方面的增量变化，如依赖包，配置文件，静态资源等。
• 按照增量部分制定具体的部署方式，编写部署脚本，并准备增量部署包（包括混淆代码，压缩文件等）。
• 分发和部署增量部署包到已经运行上一版本的目标环境，完成系统的版本升级。

参考链接：
(1) Vue配置自动打包并增量更新 - 掘金 (juejin.cn)
(2) 部署 | Vue CLI (vuejs.org)
(3) 增量部署和全量部署 - datang6777 - 博客园 (cnblogs.com)
(4) 基于vue_cli配置多页面实现增量打包 - 腾讯云开发者社区-腾讯云 (tencent.com)
(5) 大家都是，怎么做前端项目的 增量部署 的？ - 知乎 (zhihu.com)

两个单页面应用（同一个域名下）之间怎么做传值通信

我的答案：通过路由传值
两个单页面应用之间怎么做传值通信？这是一个关于前端开发的问题，我根据我搜索到的结果，尝试给你一个简单的回答。

单页面应用（Single Page Application，SPA）是一种只有一个 HTML 页面的网页应用，它可以通过动态更新页面的部分内容，而不需要重新加载整个页面，从而提高用户体验和性能。单页面应用之间的传值通信，是指在不同的单页面应用中，如何实现数据的交换和共享。单页面应用之间的传值通信，有以下几种常见的方法：

• 使用 URL 参数：这种方法是在跳转到另一个单页面应用时，通过 URL 的查询字符串（?）或者哈希值（#）来传递数据，然后在目标页面中通过解析 URL 来获取数据。这种方法简单易用，但是只能传递字符串类型的数据，而且数据会暴露在 URL 中，不够安全¹²。
• 使用 localStorage 或者 sessionStorage：这种方法是利用浏览器提供的本地存储功能，将数据保存在 localStorage 或者 sessionStorage 中，然后在另一个单页面应用中通过读取本地存储来获取数据。这种方法可以传递任意类型的数据，而且数据不会随着浏览器的关闭而消失，但是需要注意本地存储的容量限制和跨域问题¹⁵。
• 使用 postMessage：这种方法是利用 HTML5 提供的 postMessage API，可以实现不同窗口或者 iframe 之间的数据传递，无论是否同源。这种方法可以传递任意类型的数据，而且数据不会暴露在 URL 中，但是需要注意安全性问题，避免接收来自不可信来源的数据¹²。

参考链接：
(1) 四种方式实现不同页面之间的通信——前端 - 掘金 (juejin.cn)
(2) 面试官：前端跨页面通信，你知道哪些方法？ - 掘金 (juejin.cn)
(3) Vue 多个平行页面间传值，非组件间传递，简单易懂_前端多页面工程非兄弟组件传值-CSDN博客

如果需要传输大数据（列表类型的，100条，1000条这种）呢？如何传输的？

开始我回答的是图片共享，但是后面强调的是列表类型的，不是图片

如果你需要传输的数据是列表形式的，比如 100 条、1000 条之类的，你可以使用以下几种方法：

• 使用 JSON 格式：JSON 是一种用于表示数据的轻量级格式，它可以将数据转换为字符串，然后通过 URL 参数，localStorage，sessionStorage，postMessage，BroadcastChannel 等方式进行传输。在目标页面中，可以使用 JSON.parse() 方法将字符串转换为原始的数据类型。使用 JSON 格式进行跨页面通信的示例代码如下：

  // 在页面 A 中，将数据转换为 JSON 字符串
  const data = [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}];
  const json = JSON.stringify(data);

  // 在页面 A 中，使用 localStorage 存储 JSON 字符串
  localStorage.setItem('data', json);

  // 在页面 B 中，读取 localStorage 中的 JSON 字符串
  const json = localStorage.getItem('data');

  // 在页面 B 中，将 JSON 字符串转换为原始的数据类型
  const data = JSON.parse(json);
  console.log(data); // 输出 [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}]
1
2
3
4
5
6
7
8
9
10
11
12
13

• 使用 IndexedDB：IndexedDB 是浏览器提供的一种用于存储大量结构化数据的数据库，可以在不同页面之间存储和读取数据。IndexedDB 可以直接存储和读取数组，对象等复杂的数据类型，无需转换为字符串。使用 IndexedDB 进行跨页面通信的示例代码如下：

  // 在页面 A 中，打开或创建一个 IndexedDB 数据库
  const request = indexedDB.open('myDB', 1);

  // 监听 onupgradeneeded 事件，创建一个对象仓库（object store）
  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    const objectStore = db.createObjectStore('myData', {keyPath: 'id'});
  };

  // 监听 onsuccess 事件，获取数据库实例
  request.onsuccess = (event) => {
    const db = event.target.result;

    // 创建一个事务，指定对象仓库和模式
    const transaction = db.transaction(['myData'], 'readwrite');

    // 获取对象仓库
    const objectStore = transaction.objectStore('myData');

    // 存储数据到对象仓库
    const data = [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}];
    objectStore.add({id: 1, data: data});
  };

  // 在页面 B 中，打开或创建一个 IndexedDB 数据库
  const request = indexedDB.open('myDB', 1);

  // 监听 onsuccess 事件，获取数据库实例
  request.onsuccess = (event) => {
    const db = event.target.result;

    // 创建一个事务，指定对象仓库和模式
    const transaction = db.transaction(['myData'], 'readonly');

    // 获取对象仓库
    const objectStore = transaction.objectStore('myData');

    // 读取对象仓库中的数据
    const request = objectStore.get(1);

    // 监听 onsuccess 事件，获取读取的结果
    request.onsuccess = (event) => {
      const data = event.target.result.data;
      console.log(data); // 输出 [{name: 'Alice', age: 18}, {name: 'Bob', age: 20}]
    };
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

我希望这些方法能够帮助你解决跨页面传输列表数据的问题。如果你还有其他问题，欢迎继续提问。😊

非对称式加密有了解吗？稍微讲解一下吧

非对称加密是一种密码学的算法，它使用了两个不同的密钥，一个是公钥，一个是私钥。公钥可以公开给任何人，用于加密数据或者验证签名；私钥则必须保密，用于解密数据或者生成签名。

非对称加密的优点是可以解决密钥配送问题，即 不需要事先在通信双方之间安全地共享密钥 ；非对称加密的缺点是计算速度较慢，不适合加密大量的数据。非对称加密的常见应用有：

• 通过公钥加密对称密钥，实现混合加密。例如，HTTPS 协议就是使用 RSA 算法加密对称密钥，然后使用对称密钥加密网页内容，从而保证了网页的安全传输¹。
• 通过私钥加密数据，生成数字签名。数字签名可以证明数据的来源和完整性，防止伪造和篡改。例如，软件开发者可以使用私钥对软件进行签名，用户可以使用公钥验证软件的合法性²。
• 通过公钥加密数据，实现安全的信息交换。例如，电子邮件可以使用公钥加密敏感内容，只有持有私钥的收件人才能解密查看³。

非对称加密的常见算法有 RSA、ElGamal、ECC 等，它们都基于一些数学难题，如大数分解、离散对数、椭圆曲线等，使得破解非对称加密非常困难。但是，非对称加密也有一些潜在的风险，如中间人攻击、随机数生成器的安全性、量子计算机的威胁等，因此需要不断地更新和完善非对称加密的技术和标准⁴。

参考链接：
(1) 图文彻底搞懂非对称加密（公钥密钥） - 知乎 (zhihu.com)
(2) 公开密钥加密 - 维基百科，自由的百科全书 (wikipedia.org)
(3) 对称加密和非对称加密的区别-CSDN博客
(4) 对称加密和非对称的加密 的优缺点和理解 - 知乎 (zhihu.com)
(5) 【计算机网络】对称加密、非对称加密和Hash加密的介绍和区别_hash是对称还是非对称-CSDN博客

环境变量之间是怎么替换的？比如开发环境、测试环境和部署环境

我的答案：通过env.development切换

环境变量是一种用于存储和传递不同环境中的配置信息的变量，它们可以影响程序的运行行为和结果。环境变量之间的替换，是指在不同的环境中，使用不同的环境变量的值，以适应不同的需求和场景。环境变量之间的替换，有以下几种常见的方法：

• 使用配置文件：这种方法是将不同环境中的环境变量的值，保存在不同的配置文件中，例如 dev.env，test.env，prod.env 等。然后在程序中，根据当前的环境，选择加载对应的配置文件，从而获取环境变量的值。这种方法可以方便地管理和维护不同环境的配置，但是也需要注意配置文件的安全性和版本控制¹²。
• 使用命令行参数：这种方法是在运行程序时，通过命令行参数来传递不同环境中的环境变量的值，例如 node app.js --env=dev，node app.js --env=test，node app.js --env=prod 等。然后在程序中，根据命令行参数，设置或覆盖环境变量的值。这种方法可以灵活地控制不同环境的运行，但是也需要注意命令行参数的格式和规范³ 。
• 使用环境变量管理工具：这种方法是使用一些专门的工具或库，来帮助管理和替换不同环境中的环境变量的值，例如 dotenv，cross-env，env-cmd 等。这些工具或库可以根据不同的规则和方式，来自动或手动地加载和设置环境变量的值，从而简化开发和部署的流程 。

询问技术面试官的问题

我询问的问题：

• 实习相关问题
• 实习工资（行政）
• 负责什么开发，前端还是后端
• 使用什么框架

推荐问题：

询问技术面试官的问题，是一种展示你对职位和公司的兴趣和热情的好方法，也是一种了解你未来可能工作的环境和文化的机会。你想询问技术面试官的问题，应该根据你自己的情况和目标来选择，但是一般来说，有以下几个方面的问题是比较常见和有用的：

• 关于技术栈和工具的问题：你可以询问技术面试官，他们使用的技术栈和工具是什么，为什么选择这些技术栈和工具，以及他们对这些技术栈和工具的评价和建议。这样可以让你了解他们的技术水平和偏好，以及你是否能够适应和学习他们的技术栈和工具。例如，你可以问：

  • 你们使用的主要编程语言和框架是什么？你们是如何选择和评估这些技术的？
  • 你们使用的开发和部署工具是什么？你们是如何保证代码的质量和安全性的？
  • 你们使用的测试和调试工具是什么？你们是如何进行单元测试，集成测试，性能测试等的？

• 关于项目和任务的问题：你可以询问技术面试官，他们目前或者未来的主要项目和任务是什么，以及他们的项目和任务的难点和挑战是什么。这样可以让你了解他们的工作内容和目标，以及你是否能够为他们的项目和任务做出贡献和创新。例如，你可以问：

  • 你们目前或者未来的主要项目是什么？你们的项目有什么特别的需求或者目标吗？
  • 你们在项目中遇到过什么技术上的难点或者挑战吗？你们是如何解决或者克服的？
  • 你们在项目中使用了什么新的或者有趣的技术或者方法吗？你们是如何学习和应用的？

• 关于团队和文化的问题：你可以询问技术面试官，他们的团队的规模和结构是什么，以及他们的团队的文化和氛围是什么。这样可以让你了解他们的团队的合作和沟通方式，以及你是否能够融入和享受他们的团队的文化和氛围。例如，你可以问：

  • 你们的团队有多少人？你们的团队是如何分工和协作的？
  • 你们的团队的沟通方式和频率是什么？你们是如何进行代码审查，反馈，讨论等的？
  • 你们的团队的文化和价值观是什么？你们是如何培养和保持团队的凝聚力和信任的？