【必看】面试题总结

TigeeDev
751 阅读11分钟

面试准备

自我介绍

您好，我叫xxx。22年本科毕业于 xx 大学 xx 专业。之前是在 xxx 担任前端开发。有2年的前端工作经验。

我在上一家公司主要负责 PC端、微信小程序 和 H5端 的开发。然后我的技术栈主要是vue、uni-app等。

然后平时我喜欢逛一些技术博客，比如掘金、思否等，关注前端的一些趋势，喜欢看一些技术文章。

面试常见问题

1、为什么从上一家公司离职？

上一家公司个人发展有限，我希望有更好的发展。

2、你期望薪资写了10k，你上家才5k，为什么涨幅会这么高？

因为我在公司工作了将近两年，自己的技术水平提升了很多。我很喜欢这一行，平时一半的业余时间都用来学习了。

3、你对加班的看法？

加班的话，如果是项目比较着急，我是没啥问题的。

4、你平时是怎么学习的

平时的话，主要是看一些视频 和 博客论坛（掘金、思否等）来学习

5、你觉得你的优势/不足有什么

优势在于主动学习。不足是不感兴趣的内容学习不下去，比如数据库。

6、你对自己的职业规划

我希望自己能够做到 一专多精。

7、你还有什么想要问我的么？

  • 技术团队大概有多少人？
  • 公司目前在使用什么技术栈？
  • 公司是自研还是外包？
  • 公司是多少薪的？
  • 咱们基本工资和绩效的占比是多少？
  • 五险一金是按照什么比例缴纳的？

投简历注意

打招呼语（重要）

1、您好，我有两年的前端工作经验，上一段工作是在 xxx担任前端开发工程师，目前已离职可随时到岗。

我熟悉Vue、uni-app，并有相关的项目经验。在上家公司主要负责PC端、微信小程序 和 H5 的开发工作。

详细情况您可以看下我的简历，期待您的回复！

2、您好，我有两年的前端工作经验，上一段工作是在 xxx 担任前端开发工程师。主要负责PC端、微信小程序和H5的开发。

本人熟练掌握Vue框架，有实际项目开发经验，能够独立搭建项目；熟练使用uni-app开发H5和微信小程序，有从0到1的项目经验；熟悉主流UI库：Element-UI、Ant Design、uView、Vant等；熟悉各类前端工具，包括并不限于：Webpack、Git、Axios、ECharts、NPM等。

详细情况您可以看下我的简历，期待您的回复！

注意事项

  1. 偶尔更新一下简历，刷新活跃度。
  2. 投简历时间：早上8-9点，下午1点半到2点半，即HR上班前。
  3. 选好城市，直接列表从上到下挨个沟通！ 一天沟通上限是 100 个，一定要多沟通！
  4. 看一下公司的规模、类型、招聘的岗位、薪资、地点等信息，可以判断公司的真实性和可靠性。

投简历渠道

  1. BOSS直聘：适合定投
  2. 前程无忧：国企较多
  3. 智联招聘：支持海投

面试题/简历网站

参考面试题

写简历教程

面试记录

上海德衡数据 2024-3-6 13:30

  • axios 你是怎么二次封装的？里面都有什么方法？
  • 怎么解决 css 中外边距塌陷问题？
  • JavaScript 中的原型，原型链分别是什么?
  • Vue 中的生命周期？
  • Vue 双向绑定的原理？
  • Vue 中的 $nextTick 有什么作用？
  • Vuex 是什么？由哪几部分组成？
  • Vue3 和 Vue2 有什么区别？相比 Vue2 新增了那些新特性？

南京满帮集团 2024-3-6 15:00

  • 你做小程序的时候遇到了哪些难点？
  • 你对小程序都做了那些性能优化？你写的页面平均响应时间是怎么计算出来的？
  • 我看你平时会逛一些技术社区，你对目前前端趋势有什么了解吗？
  • 你在公司除了写代码外，还会做那些工作？

湖南拓维信创 2024-3-7 18:40

  • 说一下 Vue 的生命周期
  • Vue 的响应式原理有没有研究过
  • 打包工具 webpack 是什么？有没有自己配置过？
  • 说一下防抖和节流的使用场景和区别？
  • 说一下 Vue 中 this 指向分成几种？怎么改变 this 指向？
  • 说一下 ES6 中新增的数据结构 Set 和 Map。

曼光信息科技 2024-03-19 15:30

  • 解释一下 CSS 的盒模型？盒子模型的两种类型？
  • 盒子水平垂直居中的实现方式？
  • 浏览器重绘与重排的区别？
  • 伪类和伪元素的区别？
  • JS 中微任务和宏任务都有哪些？

清鹤科技 2024-03-21 14:00

  • flex 和 grid 有什么区别？
  • 说说 Javascript 数字精度丢失的问题，如何解决？
  • Vuex 和 localStorage 有什么区别？
  • 你对 SPA单页面的理解，它的优缺点分别是什么？
  • SPA（单页应用）首屏加载速度慢怎么解决？
  • Vue路由中，hash 和 history 两种模式有什么区别？
  • 你有写过自定义指令吗？自定义指令的应用场景有哪些？
  • 如何实现浏览器内多个标签页之间的通信？
  • 如何提高 webpack 的打包速度？
  • 说说 JavaScript 中内存泄漏的几种情况？
  • pnpm、npm 和 yarn 包管理工具的区别？
  • 说说你对 git rebase 和 git merge 的理解？区别是什么？

上海创和亿 2024-03-26 13:30

  • position 有哪些可选项？每个选项的含义？
  • js 的闭包是什么？它有什么优缺点？它的使用场景？
  • 什么是虚拟 DOM？
  • 大文件怎么实现断点续传？
  • 如果一个列表有 100000 个数据，这个该怎么进行展示？

合力工业车辆 2024-03-27 15:00

  • 相对定位和绝对定位的区别？
  • JS 中怎么阻止事件冒泡和默认事件？
  • JS 数组的常用方法有哪些？
  • 说说 webpack 中常见的 Loader？解决了什么问题？
  • 什么是 Promise？它的使用场景有哪些？
  • Axios 你是怎么二次封装的？里面都有什么方法？
  • 项目中遇到的难点和解决方式？

HTML/CSS

页面导入样式时，使用link和@import有什么区别？

它们都是引入外部的CSS样式，区别在于：

  • link属于HTML标签，@import是css提供的
  • link会随着页面被同时加载。而@import要到页面加载完成再加载
  • link方式的权重高于 @import的权重

有哪些常用的布局方式

  • 流动布局：这是最基本的布局方式，元素按照文档流从上到下、从左到右依次排列，自动换行。
  • Flex布局：flex 布局是一维布局，只能将元素划分成一行或者一列。适用于常见的水平居中、垂直居中以及等分布局等。
  • Grid网格布局：Grid 布局是二维布局，它通过使用网格的行（row）和列（column）来划分容器，我们可以将网格元素放在行和列对应的位置上，从而完成布局。
  • 响应式布局：通过使用媒体查询和百分比/弹性单位等技术，根据设备屏幕的尺寸和方向调整页面布局，以适应不同的设备和屏幕大小。

flex 和 grid 有什么区别

  • flex 布局是一维布局，只能将元素划分成一行或者一列。适用于常见的水平居中、垂直居中以及等分布局等
  • Grid 布局是二维布局，它通过使用网格的行（row）和列（column）来划分容器，我们可以将网格元素放在行和列对应的位置上，从而完成布局。

盒子水平垂直居中的实现？

绝对定位 + transform

  • 父亲给一个高度，position：relative；
  • 子盒子 position: absolute，top：50%; left：50%；transform: translate（-50%，-50%）

flex 布局

  • 父容器给一个高度，display：flex，justify-content：center，align-items：center;

对BFC规范的理解

BFC：块级格式化上下文。BFC是一个独立的区域，它内部元素不管怎样变化，都不会影响外部元素。

以下方式会触发BFC：

  • 根元素本身就是一个 BFC 区域
  • overflow 的值不为 visible 的块元素
  • 浮动元素（元素的 float 不是 none）

清除浮动有哪些方式？

  • 额外标签法：在浮动元素后面增加一个空白标签，并且设置 clear: both 属性
  • 给父级设置 overflow: hidden 属性，或者设置高度
  • after 伪元素清除浮动：父元素添加 clearfix 类名
  • before 和 after 双伪元素清除浮动：父元素添加 clearfix 类名

CSS单位中px/em/rem/vh/vw的区别

  • px：绝对单位，页面按精确像素展示
  • em：相对单位，会继承父元素的字体大小，如果自身定义了font-size按自身来计算
  • rem：相对单位，可理解为root em, 相对HTML根元素的字体大小来计算
  • vh、vw：表示当前视口的高度和宽度。比如100vh表示整个视口的高度，主要用于页面视口大小布局

什么是 CSS 盒子模型？盒子模型的两种类型？

网页中所有元素都可以看作是一个盒子，它包括了四部分：content 内容、padding 内边距、border 边框、margin 外边距。

CSS中的盒子模型包括 W3C 标准盒子模型 和 IE 怪异盒子模型

  • 在标准盒模型中：width 只是内容宽度，不包含 padding 和 border值。所以盒子总宽度 = width + padding + border + margin;
  • 在怪异盒模型中：width 包含了 padding和 border值。所以盒子总宽度 = width + margin;

使用 box-sizing 属性可以切换盒模型：

  • box-sizing: content-box // W3C盒子模型
  • box-sizing: border-box // IE盒子模型

怎么解决 CSS 中外边距塌陷问题？

上下相邻的两个块级元素，设置完 maigin-top 后，会导致了外边距塌陷。下面有两种解决方法：

  • 只给其中一个盒子设置外边距
  • 给父盒子添加 overflow: hidden 属性 ，触发 BFC 规则（块级格式上下文，把父级渲染成一个独立区域）

伪类和伪元素的区别？

  • 伪类：以冒号(:)开头，表示被选择元素的某种状态，例如 :hover
  • 伪元素：以双冒号(::)开头，表示在文档中插入虚构的元素。例如::before和::after

position 有哪些可选项？每个选项的含义？

  • static 静态定位，默认值
  • relative 相对定位，在原有位置的基础之上进行微调整
  • absolute 绝对定位，以父元素或浏览器窗口为基准进行定位
  • fixed 固定定位，以浏览器窗口为基准的定位
  • sticky 粘性定位，元素在超过特定值前为相对定位（relative），之后为固定定位（fixed）

相对定位和绝对定位的区别？

  • 相对定位 relative：在原有位置的基础上进行微调整，不会脱离文档流，不影响页面布局。
  • 绝对定位 absolute：以父元素或浏览器窗口为基准进行定位，会让定位元素脱离文档流，影响页面布局。
  • 二者可以配合使用：子绝父相

JavaScript

JS 数据类型有哪些？

undefined、null、Boolean、String、Number、Object，还有ES6新引入的 Symbol 类型，Symbol表示独⼀⽆⼆的值，它的出现主要解决可能出现的全局变量冲突问题。

说说 JS 数字精度丢失的问题，如何解决？

计算机在存储浮点数时，需要进行十进制和二进制的相互转换，这个转换过程可能导致计算误差，造成了精度丢失。

场景：后端返回一个数字类型的 id，数字太大超过 2的53次方 时，js这块就会四舍五入，导致精度丢失。

方案一：让后端把返回的 id 转成字符串，精度就不会丢失、

方案二：使用第三方库，如 bignumber.js、Math.js

JS 数组的常用方法有哪些？

  1. push(): 在数组末尾添加一个或多个元素，并返回新数组的长度。
  2. concat(): 合并两个或更多数组，并返回新的合并后的数组，不会修改原始数组。
  3. slice(): 从数组中提取指定位置的元素，返回一个新的数组，不会修改原始数组。
  4. splice(): 从指定位置删除或替换元素，可修改原始数组。
  5. indexOf(): 查找指定元素在数组中的索引，如果不存在则返回-1。
  6. includes(): 检查数组是否包含指定元素，返回一个布尔值。
  7. sort(): 对数组中的元素进行排序，默认按照字母顺序排序，会修改原始数组。
  8. filter(): 创建一个新数组，其中包含符合条件的所有元素。
  9. map(): 创建一个新数组，其中包含对原始数组中的每个元素进行操作后的结果。
  10. reduce(): 将数组中的元素进行累积操作，返回一个单一的值。

什么是闭包？

闭包就是能够访问其它函数内部变量的一个函数。

js 的闭包是什么？它有什么优缺点？它的使用场景？

👉👉 【面试题解】初识 JavaScript 闭包

👉👉 说说你对闭包的理解？闭包使用场景

说一下 JS 中的原型和原型链

👉👉 深入JavaScript系列（六）：原型与原型链

说一下防抖和节流的区别，以及使用场景？

防抖和节流都是防止某一事件被频繁触发。

  • 防抖：函数防抖关注一定时间内连续触发的事件，只在时间结束后执行一次。
  • 节流：函数节流在一段时间内，事件只能被调用一次；即连续触发的事件，会隔一段时间执行一次回调；

防抖使用场景：

  • 搜索框搜索输入：在用户最后一次输入完，再发送请求；
  • 手机号、邮箱验证输入检测；
  • 窗口大小 resize 变化后，再重新渲染；

节流使用场景： 滚动加载更多、搜索框的搜索联想功能。

JS 中 this 指向的几种情况

  • 普通函数：根据函数的调用方式确定 this
  • 箭头函数：箭头函数没有自己的this，它会继承外部作用域的this。所以箭头函数中使用this时，它会指向定义时所在的上下文。

怎么改变 this 指向？

  • 使用bind()方法：bind()方法会创建一个新的函数，并将其内部的this绑定到指定的对象
  • 使用箭头函数：箭头函数没有自己的this，它会继承外部作用域的this。所以箭头函数中使用this时，它会指向定义时所在的上下文。
  • 使用 call() 或 apply() 方法：call() 和 apply() 方法可以立即调用函数，并显式指定函数内部的this值。

JS 中怎么阻止事件冒泡和默认事件？

  • event.stopPropagation() 方法：可以阻止事件冒泡，但是默认事件仍然会执行。用这个方法时，如果点击一个连接，这个连接仍然会被打开。
  • event.preventDefault() 方法：可以阻止默认事件，比如在a标签的绑定事件上调用此方法，链接则不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
  • return false：可以同时阻止事件冒泡和默认事件。写上此代码，连接不会被打开，事件也不会传递到上一层的父元素。相当于同时调用了event.stopPropagation()和event.preventDefault()

解释一下事件循环，微任务和宏任务都有哪些？

1、事件循环是什么

首先 JavaScript是单线程的语言，同一个时间只能做一件事。在JS中，所有的任务都可以分为：

  • 同步任务：立即执行的任务，会直接进入到主线程中执行。
  • 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等。

同步任务进入主线程，异步任务进入任务队列。主线程内的任务执行完后，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就是事件循环。

2、微任务和宏任务

异步任务又分为微任务与宏任务，它的执行机制是：

  • 先执行一个宏任务，如果遇到微任务就把它放到微任务的事件队列中
  • 当前宏任务执行完成后，会查看微任务的事件队列，然后将里面的所有微任务依次执行完

常见的宏任务有： setTimeout/setInterval 定时器、AJAX 请求的回调函数、script 标签的加载/执行。

常见的微任务有： Promise.then、MutationObserver监听器

什么是虚拟 DOM？

👉👉 什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

说说 JavaScript 中内存泄漏的几种情况？

👉👉 万恶的前端内存泄漏及万善的解决方案

Axios 你是怎么二次封装的？里面都有什么方法？

👉👉 Vue项目中有封装过axios吗？主要是封装哪方面的？

ES6

ES6 有哪些新特性？

ES6（ECMAScript 6.0）是 JavaScript 语⾔的下⼀代标准，也称为 ES2015 。ES6 的新特性有：

  • let 和 const：ES6中引入了声明变量的新关键字 let 和 const，解决了使用 var 时出现的一些不合理的问题。如变量提升、重复声明等。
  • 解构赋值：ES6中按照一定规则，从数组和对象中提取值，然后同时给多个变量赋值，被称为解构赋值。
  • 模板字符串：模板字符串是增强版字符串，它可以拼接字符串和变量。
  • 箭头函数：箭头函数使函数的定义更加⽅便、简洁。
  • BigInt：BigInt（⼤整数）是 ES6 引⼊的⼀种新的原始数据类型 ，它能表示范围更⼤的数值。
  • Symbol：Symbol 是 ES6 引⼊的⼀种新的原始数据类型，表示独⼀⽆⼆的值。可作为对象的属性使⽤，确保属性名不重复。
  • Set 和 Map：Set 和 Map 是 ES6 中两个新的数据结构。Set 类似于数组，而且里面的值都是唯一的，常用作数组去重。Map 类似于 JSON 对象，也是键值对的集合，但是 “键” 可以是任意类型。
  • Promise：Promise 是⼀种异步编程的解决⽅案，⽐回调函数更加强⼤。与 Promise 相关的还有 async。
  • Class：ES6中通过Class关键字定义类，相当于 ES5 中构造函数的语法糖。

let、const、var 有什么区别

  • 块级作用域： let 和 const 具有块级作用域，var 不存在块级作用域。
  • 变量提升： var 存在变量提升，let 和 const 不存在变量提升，即在变量只能在声明之后使用，否则会报错。
  • 重复声明： var 可以重复声明变量，后声明的同名变量会覆盖之前的。const 和 let 不允许重复声明变量。
  • 初始值设置： 在变量声明时，var 和 let 可以不用设置初始值。而 const 声明变量必须设置初始值。

什么是 Promise？它的使用场景有哪些？

Promise 是 JavaScript 的一种异步编程解决方案，用于处理异步操作和回调函数的复杂性。它可以用于更优雅地处理异步代码，并且提供了更好的可读性和可维护性。

Promise 的三种状态：

  • Pending（进⾏中）：初始状态，不是成功也不是失败。
  • Fulfilled（已成功）：操作成功完成，返回结果。
  • Rejected（已失败）：操作失败，返回错误信息。

Promise 对象提供了 then ⽅法，可以将异步操作成功的回调函数和失败的回调函数注册到 Promise 对象上，当 Promise 对象状态变为 Fulfilled 或 Rejected 时，会⾃动调⽤对应的回调函数。

Promise 的使用场景有很多，比如：

  • Ajax 请求：Promise 可以⽤于异步获取数据，当数据请求成功时，调⽤ Promise 的 resolve ⽅法，否则调⽤ reject ⽅法。
  • 定时器：Promise 可以结合定时器⼀起使⽤，实现定时器的延时操作。
  • 图⽚加载：Promise 可以⽤于图⽚的异步加载，当图⽚加载成功时，调⽤ Promise 的 resolve ⽅法，否则调 ⽤ reject ⽅法。
  • 解决回调地狱问题：将嵌套的回调函数转换成链式调⽤，提⾼代码可读性。

说一下 Set 和 Map 的用法

Set 和 Map 是 ES6 中两个新的数据结构。

  • Set 类似于数组，而且里面的值都是唯一的。常用作数组去重。
  • Map 类似于 JSON 对象，也是键值对的集合，但是 “键” 可以是任意类型。

浏览器

什么是浏览器的同源策略？为什么要有同源策略？

同源策略是浏览器中的一种安全机制。同源指的是 协议、域名、端⼝ 三者均相同，三者中有不同之处时就会出现跨域问题。跨域请求会被发送到服务器，但是返回的响应会被浏览器拦截。

同源策略又分为三种：

  • Cookie、LocalStorage 存储同源策略：存储的数据只能在同源网站中共享。
  • DOM同源策略：JS 脚本只能访问同源网站的 DOM。
  • XMLHttpRequest请求同源策略：只能访问同源的网络请求。

同源策略的作用是保护用户的隐私安全，并防止 XSS 网络攻击。但是这也导致不同源的网站之间访问受限，我们可以用以下三种方法解决跨域问题：CORS、Nginx反向代理、JSONP。

怎么解决跨域问题？

解决跨域主要有三种方法：CORS、Nginx反向代理 和 JSONP。前两种跨域方案用的比较多。

  • CORS：是跨域资源共享。只要后端实现了 CORS，就实现了跨域。
  • Nginx反向代理：只需要修改 Nginx 的配置即可解决跨域问题。它支持所有浏览器，不需要修改任何代码，也不会影响服务器性能。
  • JSONP: JSONP 简单兼容性好，可以解决主流浏览器的跨域问题。但是只支持 GET 请求，不安全可能会遭受XSS攻击。

cookie、localStorage 和 sessionStorage 的区别？

相同点：都是存储在浏览器

不同点：

  • 生命周期：cookie 在设置的过期时间之前一直有效；localStorage是永久保存在浏览器中；sessionStorage在关闭网页后自动清除；
  • 存放数据大小：cookie能存放 4KB 左右，localStorage 和 sessionStorage 可以保存 5MB 左右；
  • cookie携带在 HTTP 头中，会自动发送到服务器；localStorage 和 sessionStorage 仅在浏览器中保存，不参与和服务器的通信；

从输入 URL 到页面渲染完成发生了什么？

  • 首先输入URL
  • DNS域名解析
  • 建立TCP连接
  • 发起HTTP请求
  • 服务器响应请求并返回结果
  • 浏览器解析并渲染页面

浏览器重绘与重排的区别？

重排/回流⼀定会伴随重绘，但是重绘可以单独发生。

  • 重绘：元素的样式发生了改变，但是没有影响页面布局，浏览器对元素进行重新绘制的过程，叫做重绘。
  • 重排/回流：当增加/删除Dom节点，改变元素尺寸等，导致页面结构发生改变。浏览器重新计算并渲染页面的过程，叫做重排

如何触发重排和重绘？

任何改变页面布局和元素几何属性的操作都会导致一次重排或重绘。

  • 添加、删除、更新DOM节点
  • 改变元素的样式属性
  • 调整窗口大小，改变字号，滚动页面等

如何避免重绘或者重排？

  1. 尽可能使用 Class 类名来修改样式，不要一条一条地修改 DOM 的样式
  2. 避免循环操作 DOM 元素
  3. 尽量只修改 position：absolute或fixed元素，这些元素脱离了文档流，不会影响到其他元素
  4. 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局

如何实现浏览器内多个标签页之间的通信？

  • localStorage： 它是浏览器多个标签共用的存储空间，所以可以实现多标签之间的通信（ps：session是会话级的存储空间，每个标签页都是单独的）
  • cookie： 在页面A设置一个setInterval定时器，检查Cookies的值是否发生变化。在页面B中改变Cookies的值时，页面A就可以实时拿到了。
  • postMessage： window.postMessage 方法可以实现跨源通信。它需要交互的两个页面具有依赖关系，比如A页面中通过 JavaScript 的 window.open 打开B页面，或者B页面通过 iframe 嵌入至A页面。
  • Broadcast Channel： 广播频道，可以用于同源不同页面之间完成通信。
  • WebSocket通讯

Vue

Vue2 的生命周期有哪些？

Vue 的生命周期总共分为8个阶段：创建前后，载入前后，更新前后，销毁前后。

  • beforeCreate：组件实例创建前。通常用于插件开发中执行一些初始化任务
  • created：组件实例创建后。组件初始化完毕，各种数据可以使用，常用于异步数据获取
  • beforeMount：组件挂载前。未执行渲染、更新，dom未创建
  • mounted：组件挂载后。初始化结束，dom已创建，可用于获取访问数据和dom元素
  • beforeUpdate：组件数据更新前。可用于获取更新前各种状态
  • updated：组件数据更新后。获取最新状态
  • beforeDestroy：组件实例销毁前。可用于一些定时器或订阅的取消
  • destroyed：组件实例销毁后。作用同上

其他生命周期函数：

  • activated：keep-alive 缓存的组件激活时
  • deactivated：keep-alive 缓存的组件停用时调用

computed 和 watch 有什么区别？

computed 和 watch 都是在数据发⽣变化时去执⾏对应的逻辑代码

computed 计算属性

  • 它支持缓存，只有依赖的数据发生了变化，才会重新计算
  • 不支持异步，当 Computed 中有异步操作时，无法监听数据的变化
  • 当需要进⾏数值计算，并且依赖于其它数据时，一般会使用 computed

watch 侦听器

  • 它不支持缓存，当监听的值发生变化时，它就会执行对应逻辑

  • 支持异步监听

  • 监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值

  • 函数有两个参数；

    • immediate：组件加载立即触发回调函数
    • deep：深度监听，用于处理复杂数据类型，例如数组中的对象发生变化。

Vue 双向绑定的原理？

Vue 是采用 数据劫持 结合 发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

👉👉 Vue双向数据绑定原理

Vue 的响应式原理

Vue 是采用 数据劫持 结合 发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

Vue 中的 $nextTick 有什么作用？

  • nextTick 是 Vue 提供的一个全局 API，在下次 DOM 更新循环结束之后执行延迟回调。
  • 使用场景：如果想要在修改数据后立刻得到更新后的 DOM 结构，可以使用 Vue.nextTick()

👉👉 Vue中的$nextTick有什么作用？

Vuex 是什么？由哪几部分组成？

Vuex是 Vue 应用程序中的一种状态管理模式，用于集中管理组件共享的状态数据。

Vuex 由以下五种组成：

  • State：定义了应用的状态数据；
  • Getter：可以从 state 中获取数据，并进行处理和计算后暴露给组件使用。类似于计算属性；
  • Mutation：是唯一更改 store 中状态的方法，且必须是同步函数；
  • Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
  • Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

👉👉 手把手教你使用Vuex，猴子都能看懂的教程

Vuex 和 localStorage 有什么区别？

  • Vuex 将数据存储在内存中，localStorage 以文件的方式存储在本地。读取内存的速度比读取硬盘更快
  • Vuex 用于组件之间共享和传递状态，能做到数据的响应式。而 localStorage是将数据存储到本地，通常在跨页面传递数据时使用
  • 刷新页面时 Vuex 存储的值会丢失。localStorage 存储的数据仍然保留，具有较长的持久性。

v-show 和 v-if 有什么区别？

  • v-show 和 v-if 都是根据条件来控制元素的显示和隐藏
  • v-if 是动态的向 DOM 内添加和删除元素；v-show 只是通过设置元素的 display 样式属性控制显隐，不会从 DOM 中移除元素。
  • v-if 适合条件不会频繁改变的场景；v-show 适合频繁切换元素状态。

v-for 和 v-if 能在一起使用吗？

v-for 和 v-if 不建议在一起使用。

  1. 因为在 Vue2 中 v-for 的优先级比 v-if 高（Vue3 中优先级相反），这会导致 v-if 重复运行在每个 v-for 循环中，造成很大的性能浪费。
  2. 这种场景一般会用 computed 计算属性筛选出数据。

Vue 组件间通信方式有哪些?

  • 父子组件通信：props传递数据、$emit触发自定义事件、也可选择ref
  • 兄弟组件通信：事件总线EventBus、$parent父实例、$root根实例
  • 祖孙组件通信：$attrs / $listeners 或者 provide / inject
  • 更加复杂的组件通信：通过vuex存放共享的变量

你对 SPA单页面的理解，它的优缺点分别是什么？

SPA 全称 Single Page Application，即单页面应用。所有必要的代码（HTML、JavaScript和CSS）在一次请求中都会加载完成。

单页面应用优点： 页面切换快、用户体验好

缺点： 首次渲染速度慢、不利于SEO

SPA（单页应用）首屏加载速度慢怎么解决？

首屏加载速度慢的原因可能是：

  • 网络延时比较高
  • 资源文件体积大
  • 资源重复发送了请求去加载

常见的几种 SPA 首屏优化方式：

  • 路由懒加载：当打开页面时才去加载对应文件
  • UI组件按需加载：比如Element-UI，只用到几个组件时，就可以改成按需加载
  • 构建时压缩图片：使用 image-webpack-loader 插件
  • 开启 GZip 压缩：安装compression-webpack-plugin，可以减小 60% 以上的文件体积
  • 使用SSR：SSR（Server side），也就是服务端渲染。组件或页面通过服务器生成 html 字符串，再发送到浏览器

Vue路由中，hash 和 history 两种模式有什么区别？

区别：url 形式不同。hash 模式：URL + 井号 # + 路径、history 模式：URL + 路径

hash 模式：

  • 当井号 # 后面的路径发生变化时，页面不会重新加载，而是触发一个hashchange事件。
  • 优点：浏览器兼容性较好，连 IE8 都支持
  • 缺点：路径在井号 # 的后面，比较丑

history 模式：

  • 允许直接修改前端路由，也就是说更新浏览器 URL 地址而不重新发起请求
  • 优点：路径比较正规，没有井号 #
  • 缺点：兼容性不如 hash，且需要服务端支持，否则一刷新页面就404了

你有写过自定义指令吗？自定义指令的应用场景有哪些？

参考：自定义指令

Vue 中内置了很多指令，比如 v-model 和 v-show 等，不同的指令可以实现不同的功能。

Vue 注册自定义指令分为：全局注册和局部注册

  • 全局注册主要是通过Vue.directive方法进行注册。它接收两个参数：指令名称和指令选项对象。指令选项对象包含一系列钩子函数，用于定义指令的行为。
  • 局部注册通过在组件options选项中设置directive属性

自定义指令应用场景：

  • 操作 DOM 元素：比如修改元素的样式、属性等。可以通过在指令的钩子函数中访问和操作 DOM 元素。
  • 权限控制：比如根据用户权限来隐藏或禁用某些元素
  • 表单防止重复提交
  • 一键 Copy 的功能

Vue2 和 Vue3 有什么区别？

  • 生命周期钩子名称
  • 自定义指令钩子名称
  • 新的内置组件
  • Composition API
  • 对于 TS 的支持
  • ......

性能优化

大文件怎么实现断点续传？

👉👉 大文件怎么实现断点续传？

如果一个列表有 100000 个数据，这个该怎么进行展示？

  • 将数据分页： 利用分页的原理，每次服务器端只返回一定数目的数据，浏览器每次只对一部分进行加载。
  • 使用懒加载： 每次加载一部分数据，其余数据当需要使用时再去加载。
  • 使用数组分块技术： 基本思路是为要处理的项目创建一个队列，然后设置定时器每过一段时间取出一部分数据，然后再使用定时器取出下一个要处理的项目进行处理，接着再设置另一个定时器。
  • 虚拟列表： 每次只渲染需要视口的部分。

怎么实现虚拟列表？

虚拟列表是一种优化长列表渲染性能的技术，它只渲染可见区域内的部分内容，从而大幅降低了页面渲染的复杂度。

实现虚拟列表需要以下步骤：

  • 计算可见区域：首先需要计算出当前可见区域内的列表项数量和位置。
  • 渲染可见区域：只渲染当前可见区域内的列表项，而不是整个列表。
  • 动态调整列表高度：由于只渲染了部分列表项，因此需要动态调整列表容器的高度，以确保滚动条可以正确地显示并且用户可以滚动整个列表。
  • 延迟加载非可见区域：当用户滚动列表时，需要根据当前滚动位置动态加载非可见区域的列表项，以便在用户滚动到该区域时能够及时显示。

在实现虚拟列表的过程中，还可以使用一些技术来优化渲染性能，包括：

  • 虚拟 DOM：使用虚拟 DOM 技术可以减少每次重新渲染时需要操作真实 DOM 的次数，从而提高渲染性能。
  • 懒加载：懒加载可以延迟加载非可见区域的列表项，从而减少不必要的网络请求和资源占用。
  • 缓存：缓存可以在滚动时快速复用已经渲染的列表项，从而减少重新渲染的次数。

打包工具

webpack 是什么？

Webpack 是⼀个开源的前端打包工具，它主要用于将多个 JavaScript 文件打包成⼀个或多个⽂件，以便在浏览器 中加载。它的核心功能就是模块化，像 js、css、图片等资源文件都支持打包。

主要作用包括：

  • 支持代码分割：可以将代码拆分成多个块，从而实现按需加载，提高页面加载速度和性能。
  • 支持插件和 Loader：可以通过插件和 Loader 实现各种各样的自动化任务，如压缩代码、⽣成 HTML ⽂件、 图片压缩、样式预处理等
  • 支持开发和生产环境的不同配置：比如开发环境下需要支持热更新，生产环境下需要压缩代码等
  • 提供了开发服务器：可以在开发过程中快速构建和预览应用程序，提高开发效率。

说说 webpack 中常见的 Loader？解决了什么问题？

Loader 的作用： 可以实现对不同格式文件的处理，比如将 Scss 转换为 CSS，或者将 TS 转化为 JS

常见的 Loader：

  • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
  • style-loader：将 CSS 添加到 DOM 的内联样式标签 style 里
  • less-loader: 处理 less
  • sass-loader: 处理 sass
  • file-loader: 把文件输出到 output 文件夹中，并返回相对路径
  • image-loader：加载并压缩图片文件
  • babel-loader：把 ES6 转换成 ES5

如何提高 webpack 的打包速度？

webpack 打包优化没有固定的模式，在实际项目中需要不断调试和优化。

下面是常见的优化方式：

  • 升级 webpack 版本：Webpack 不断更新优化打包速度，升级到最新版本可以获得更好的性能
  • 拆分代码块：将代码拆分为更小的代码块，可以减少打包时间
  • 避免不必要的插件和 loader

前端工程化

pnpm、npm 和 yarn 包管理工具的区别？

pnpm、npm、yarn 都是用来管理项目依赖、发布包、安装依赖的工具

  • pnpm： 速度更快，比 npm 快 2 倍；磁盘空间利用效率高，不会重复安装同一个包

  • npm： 速度慢，新项目半天才能安装完；无法保持版本统一，经常会遇到安装版本不一致的bug

    yarn： 速度快，会同步执行所有任务、还有离线模式；安装版本统一，默认会生成 yarn.lock 锁定文件；输出信息更加简洁，只会打印出一些必要的信息

Git

说说你对 git rebase 和 git merge 的理解？区别是什么？

git rebase 与 git merge都是将一个分支的提交合并到另一分支上

  • git merge：将当前分支合并到指定分支
  • git rebase：将当前分支移植到指定分支或指定commit之上。常用的语法是 git rebase --continue，表示解决冲突之后，继续执行rebase
  • merge和rebase都是合并历史记录。但是 merge 会导致历史记录相对复杂，而 rebase 让历史记录更加清晰
avatar
文章
阅读
粉丝