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

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

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

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

参考链接:

(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,表示开启自适应功能。
  • 在图表容器的样式中,设置 widthheight100%,表示占满父元素的宽度和高度。
  • window 对象上,添加 resize 事件监听器,当窗口大小改变时,调用图表实例的 resize 方法,重新渲染图表。

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

js 复制代码
  // 获取图表容器
  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) 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 页面。例如,可以在路由配置中添加如下代码²:

    javascript 复制代码
    const router = new VueRouter({
      mode: 'history',
      routes: [
        { path: '*', component: NotFoundComponent }
      ]
    })
  • 如果使用 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)中有效,当用户关闭浏览器或者标签页时,数据会被清除。

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

js 复制代码
  // 存储数据
  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) 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 格式进行跨页面通信的示例代码如下:
js 复制代码
  // 在页面 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}]
  • 使用 IndexedDB:IndexedDB 是浏览器提供的一种用于存储大量结构化数据的数据库,可以在不同页面之间存储和读取数据。IndexedDB 可以直接存储和读取数组,对象等复杂的数据类型,无需转换为字符串。使用 IndexedDB 进行跨页面通信的示例代码如下:
js 复制代码
  // 在页面 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}]
    };
  };

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

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

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

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

  • 通过公钥加密对称密钥,实现混合加密。例如,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 等。这些工具或库可以根据不同的规则和方式,来自动或手动地加载和设置环境变量的值,从而简化开发和部署的流程 。

询问技术面试官的问题

我询问的问题:

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

推荐问题:

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

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

    • 你们使用的主要编程语言和框架是什么?你们是如何选择和评估这些技术的?
    • 你们使用的开发和部署工具是什么?你们是如何保证代码的质量和安全性的?
    • 你们使用的测试和调试工具是什么?你们是如何进行单元测试,集成测试,性能测试等的?
  • 关于项目和任务的问题:你可以询问技术面试官,他们目前或者未来的主要项目和任务是什么,以及他们的项目和任务的难点和挑战是什么。这样可以让你了解他们的工作内容和目标,以及你是否能够为他们的项目和任务做出贡献和创新。例如,你可以问:

    • 你们目前或者未来的主要项目是什么?你们的项目有什么特别的需求或者目标吗?
    • 你们在项目中遇到过什么技术上的难点或者挑战吗?你们是如何解决或者克服的?
    • 你们在项目中使用了什么新的或者有趣的技术或者方法吗?你们是如何学习和应用的?
  • 关于团队和文化的问题:你可以询问技术面试官,他们的团队的规模和结构是什么,以及他们的团队的文化和氛围是什么。这样可以让你了解他们的团队的合作和沟通方式,以及你是否能够融入和享受他们的团队的文化和氛围。例如,你可以问:

    • 你们的团队有多少人?你们的团队是如何分工和协作的?
    • 你们的团队的沟通方式和频率是什么?你们是如何进行代码审查,反馈,讨论等的?
    • 你们的团队的文化和价值观是什么?你们是如何培养和保持团队的凝聚力和信任的?
相关推荐
我爱李星璇几秒前
HTML常用表格与标签
前端·html
疯狂的沙粒4 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员20 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐22 分钟前
前端图像处理(一)
前端
程序猿阿伟29 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒31 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪39 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背42 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc1 小时前
学习electron
javascript·学习·electron