vue面试总结

Lee__603

已于 2022-10-08 23:39:38 修改

阅读量440

点赞数

文章标签： vue.js 面试 javascript

于 2022-10-08 23:39:02 首次发布

本文链接：https://blog.csdn.net/Lee__603/article/details/127218535

版权

这篇博客详细总结了Vue.js面试中的常见问题和技术点，涵盖了HTML5新特性、CSS3新特性、JavaScript核心知识、ES6特性、前端扩展知识、浏览器知识以及Webpack配置等内容。重点讲解了Vue的基础知识，包括Vue3与Vue2的区别、Vue的响应式原理、组件通信、Vuex和pinia的状态管理，以及Vue Router的使用。此外，还探讨了CSS的BFC、JavaScript的运行机制、防抖与节流等技术细节。

摘要由CSDN通过智能技术生成

HTML5

语义化标签

header、nav、footer、section、article、aside 优点：更好的SEO，更清晰的HTML结构，增强了可读性，便于维护开发

header：定义页面或文章头部，通常包含logo、页面标题等
nav：定义只包含导航链接的章节
section：定义文档中的一个章节/部分
aside：定义和页面内容关联度较低的内容（即使删除，剩下的内容仍然合理）
footer：定义页面或章节的尾部，通常包含版权信息、法律信息和反馈建议等有效链接地址

媒体标签：

audio(音频)、video(视频)
不需要第三方插件就能播放音频和视频了，可以直接插入，并且用同一的API接口控制。

SVG和Canvas

SVG:可缩放矢量图形，svg并不是html5专有的标签

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

Canvas：画布

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG和Canvas区别：

Canvas是使用javaScript程序绘制动态生成的，SVG是使用xml文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图更容易编辑
SVG是基于矢量的，所以它能够很好的处理图形大小的变大。canvas是基于位图的图像，他不能改变大小，只能缩放显示，最适合带有大型渲染区域的应用程序（比如谷歌地图）
canvas支持的颜色比SVG多，更适合图像密集型的游戏之类使用

Geolocation定位：

Geolocation：是window.navigator下面的一个对象，该对象提供了实现地理位置定位的接口。要用该功能首先判断浏览器是否支持navigator.geolocation该对象。

localStorage和sessionStorage和Cookie

用法：
- 存储：
  - 普通类型：window.localStorage.setItem(‘key’,value)；
  - OBject类型：window.localStorage.setItem(‘param’,JSON.stringify(Object))
- 读取：
  - 普通类型：window.localStorage.getItem(‘key’)；
  - OBject类型：JSON.parse(window.localStorage.getItem(‘key’))
- 删除：
  - window.localStorage.removeItem(‘key’)
- 清除缓存：
  - localStorage.clear()
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
- 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
- localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
- sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
- 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
cookie和它们的区别：
- cookie数据始终每次http请求都会携带cookie，浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发送给服务器；
- 存储大小限制也不同，cookie单个cookie数据不能超过4K，sessionStorage和localStorage可以达到5M或更大；
- 数据有效期不同，cookie只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭；
- 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面; localstorage在所有同源窗口中都是共享的; cookie也是在所有同源窗口中都是共享的。
cookie使用：
- 写入：document.cookie=‘username=xxxx’；
- 读取：document.cookie;

fetch请求方式：

Fetch是浏览器内置API，Ajax的替代者，在浏览器环境中，封装了Promise机制，可以通过顶层对象window获取，优化了异步问题——可以直接用.then()方法。

    const url = "https://gitee.com/api/v5/users/liyangyf";
    fetch(url).then( response=>response.json() )  // 将response数据解析成json
              .then( json=>console.log(json) )

input新类型：

email : 提交表单时检测值是否是一个电子邮件格式
url: 提交表单时检测值是否是一个url格式
date: 年-月-日格式的控件
time: 时:分格式的控件
datetime-local : 年-月-日时:分格式的控件（本地时间）
month : 年-月格式的控件
week: 年-周数格式的控件
number: 数字输入框
Range : 选择区域
tel: 电话输入框
search: 用于搜索
color: 调用系统选色器

input新属性：

placeholder: 占位符，输入框提示信息
required: 该input为必填项
autofocus: 在页面加载时，域自动地获得焦点
Pattern : 正则验证如: pattern=“[0-9]{7,12}”
min/max: input能输入的最小/最大数字的大小
maxlength:input能输入的最大字节的长度(最多可以输入的文字或者字母的个数)
Step；针对number和range类型，每次递增step的值
list: 指定一个datalist，作为下拉提示单

CSS

CSS3 新特性有哪些？

颜色:新增 rgba(),HSLA 模式
文字阴影（text-shadow、）
边框: 圆角（border-radius）边框阴影: box-shadow ; 边框图片：border-image
盒子模型:box-sizing
背景:background-size 设置背景图片的尺寸 background-origin 设置背景图片的原
点，background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自
适应布局
渐变:linear-gradient、radial-gradient
过渡:transition,可实现动画
自定义动画
在 CSS3 中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
2D 转换：transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
3D 转换：transform:translate3d(x,y,z)

Scss与Less区别

变量不同：less-@ scss-$
运算： scss 加减法中计算单位必须相同；less 加减法中可以不同单位进行运算
作用域不同， less 存在变量提升 scss 没有变量提升 $number:1px @number:1px

什么是BFC

BFC直译为‘块级格式化上下文’。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。 block-level box，display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。

BFC特性

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
计算BFC的高度时，浮动元素也参与计算
BFC的区域不会与float box发生重叠
BFC内部的Box会在垂直方向，一个接一个的放置
每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此
BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

CSS问题

清除图片间隙

清除图片左右间距

两张图片挨着写（img标签挨在一起）
父元素的font-size设置为0
给图片设置浮动

清除图片上下间距

图片设置为display：block
给图片设置vertical-align：top/bottom/middle

元素水平垂直居中

弹性盒
- 父元素：display：flex；子元素：margin：auto；
- 父元素：display：flex；justify-content：center；align-item：center；
定位
- 父元素：position：relative；子元素：position：absolute；left：0；right：0；bottom：0；top：0；margin：auto；
定位+2D变形
- 父元素：position：relative；子元素：position：absolute;top:50%;left:50%;transform：translate（-50%，-50%）；

css长度单位

px：常用的绝对长度单位，相对与显示器分辨率而定位的单位，兼容性较好
百分比：常用相对长度单位，相对于父元素的尺寸取值
pt：绝对长度单位 1px = 0.75pt
em：相对长度单位，相对于当前元素内部的文本尺寸
rem：css3新增的相对长度单位，相对的是根元素HTML的文本尺寸
vw：相对视窗宽度的百分比（1vw代表视窗宽度1%）
vh：相对视窗高度的百分比
vmax：当前vw和vh中较大的值
vmin：当前vw和vh中较小的值

高度塌陷

高度塌陷是因为所有的子元素浮动,且父元素没有设置高度,就会触发父元素高度塌陷;

给父元素添加固定高度；缺点:不适合高度自适应的布局。

给父元素添加overflow:hidden;

行内元素、块状元素、行内块状元素

行内元素

设置宽高无效
margin设置仅左右有效，padding设置上下左右都有效
不会自动换行

块状元素

可以设置宽高
margin，padding上下左右均有效
会自动换行
块状元素排列从上至下(未脱离文档流时)

行内块状元素

不会自动换行
可以设置宽高
默认排列从左至右

css选择器

!importent > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

动画和过渡区别

animation(动画)、transition-property(过度)

动画不需要事件触发，过渡需要，
过渡只有开始和结束两个关键帧，动画可以设置多个关键帧

元素水平垂直居中

弹性盒
- 父元素：display：flex；子元素：margin：auto；
- 父元素：display：flex；justify-content：center；align-item：center；
定位
- 父元素：position：relative；子元素：position：absolute；left：0；right：0；bottom：0；top：0；margin：auto；
定位+2D变形
- 父元素：position：relative；子元素：position：absolute;top:50%;left:50%;transform：translate（-50%，-50%）；

重绘和回流

回流:当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建时，这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree

重绘:浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘
当render tree中的一些元素需要更新属性时，而这些属性只是影响元素的外观、风格而不会影响布局的时候，比如background-color，文字颜色、边框颜色等。则就称为重绘。

回流一定会触发重绘，而重绘不一定会回流

JavaScript

js运行机制

首先我们需要了解JavaScript的特性就是单线程，单线程简单的说就是同一时间只能做一件事。那么为什么是单线程呢？作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程再某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。多线程可以将任务放到不同的线程中去处理。CPU的调度单位是线程，它会在不同的线程之间切换，任务是隶属于线程的
于是，JavaScript中所有任务可以分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入“任务队列”的任务，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
主线程从“任务队列”中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件轮询）
这个任务队列都是已经完成的异步操作
对于异步任务队列来说，又分为宏任务和微任务
宏任务：包括整体代码 script，setTimeout，setIntervcal
微任务：Promise，process.nextTick
执行顺序：进入整体代码后，开始第一次循环。接着执行所有的微任务，然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务

typescript（ts）

不是一门新语言，是用来规范js的语言，是js的超集，常用在大型项目中，使得代码更规范，维护更加方便
不需要去浏览器中浏览效果，就能知道编译错误
类型就是最好的注释，看类型我们就知道这个是什么
即使ts中有编译报错，tsc依旧可以将其编译成js
特点：
- 增加静态检查，增加代码健壮性
- 多人协作，提高生产力，降低维护成本
新增类型：

tuple(元组)
- 可以明确知道包含了多少元素（这里的元素是类型）
- 可以明确知道每个类型所在的位置
- 长度固定，元组类型的变量需要为每一个位置定义对应类型的值
```
type StringNumberPair = [string, number];
let testTupleTypeMatched: StringNumberPair = ['1', 2]; // ok
```

enum(枚举)

列举类型中包含的各个值，一般用它来管理多个相同系列的常量（即不能被修改的变量），用于状态的判断。这是一种无序的数据结构，把键映射到值上，可以理解为编译时键固定的对象，访问键时，ts将检查指定的键是否存在

    //默认从0开始
    enum Direction{
        Up,
        Down,
        Left,
        Right,
    }
    console.log(Direction.Up)//0
    console.log(Direction[0])//up

    //赋值后往后以此类推
    enum Direction2{
        Up=1,
        Down,
        Left,
        Right,
    }
    console.log(Direction2.Down)//2
    console.log(Direction2[2])//Down

any(任意类型)
never(null或undefind)
void

interface和type区别
- 是ts中定义类型的两种方式
- 都可以描述一个对象或者函数
- interface只能定义对象类型
- interface能够声明合并，type不行
- type 可以声明基本类型别名，联合类型，元组等类型
ts中面向对象成员修饰符：public , private , protexted
- public：是表示是公开的，在任何地方，都可以调用，不管在类中，还是子类中，还是对象中均是可以直接调用
- private:是表示私有的，只能在类中访问，不能在子类或者对象中访问，要调用私有的属性或者方法，可以通过在类中设置公有的方法访问私有的成员，对外暴露公有的方法进行访问，子类继承的时候，也可以继承父类私有的属性和方法，但是也要通过在子类继承过来的公有的方法进行访问私有的属性
- protected: 只能在类中或者子类中进行访问，但是不能在自身类或者子类对象中访问
  总的老说,权限范围：public>protected>private