2023 Vue前端面试题

一、css

1.说一下css盒子模型

在html中，所有的元素都可以看成是一个盒子

盒子组成：内容content、内边距padding、边框border、外边距margin

盒模型类型：

标准盒模型

margin+border+padding+content

ie盒模型

margin+content(padding+border)

控制盒模型的模式：box-sizing:content-box(默认值，标准盒模型)、border-box(ie盒模型)

2.css选择器的优先级

css特性：继承性、层叠性、优先级

优先级：

！important、行内样式、、id选择器、类/伪类/属性、标签、全局选择器

3.隐藏元素的方法

display:none;不占据空间

opacity:0;占据空间

visibilty:hidden;占据空间

position:absolute;

clip-path剪切

4.px和rem的区别

px：绝对单位长度

rem:相对单位长度，相对于html根节点的font-size的值，1rem=10px；font-size:62.5%（16px* 62.5%=10）

5.重绘重排有什么区别？

重排（回流）：布局引擎会根据样式计算出盒模型在页面上的位置和大小。

重绘：计算好盒模型的位置、大小和其他一些属性后，浏览器会根据每个盒模型的特点进行绘制。

浏览器的渲染机制：对dom的大小、位置进行修改后，浏览器需要重新计算这些元素的几何属性，叫重排。

对dom样式进行修改，color，bgcolor，浏览器不需要进行计算集合属性的时候，直接绘制该元素的新样式，叫重绘

6.让一个元素水平垂直居中

定位+margin

定位+transform

flex布局

grid布局

table布局

7.css那些属性可以继承，那些不能继承

字体属性font

文本属性line-height

元素可见性

表格布局属性border-spacing

列表属性list-style

页面样式属性page

8.预处理器

预处理语言增加了变量、函数、混入等功能

sass less

二、javascript

1.js的组成

ECMAScript:js核心，描述语言基础语法，var、for等

文档对象模型(DOM)：把html页面规划为元素构成的文档

浏览器对象模型(BOM)：对浏览器窗口进行访问和操作

2.js内置对象

string boolean number array object function math date regexp

3.操作数组的方法有哪些

push() pop() sort() splice() unshift() shift() reverse() map()

4.对数据类型的检测

typeof() 判断基本数据类型

instanceof() 判断引用数据类型

constructor 基本数据类型和引用数据类型，声明构造函数并指向array

object.prototype.tostring.call() 支持所有类型

5.闭包，特点

闭包：函数嵌套函数，内部函数被外部函数返回并保存下来

特点：重复利用变量，这个变量不会污染全局，变量不会被垃圾回收机制回收。

缺点：会消耗内存，导致页面性能下降，在ie浏览器中会导致内存泄漏

使用场景：防抖、节流、避免数据全局污染

6.前端内存泄漏

js分配内存地址，但长时间没释放导致崩溃的情况。

因素：不声明就赋值、未清除的定时器、闭包、引用元素没有清楚

7.事件委托

原理：事件冒泡机制，子元素事件绑定到父元素身上

阻止事件冒泡 event.stopPropagation()

8.基本数据类型和引用数据类型的区别

基本数据类型：string、number、boolean、undfined、null 保存在栈内存当中，保存的是具体的值

引用数据类型：object、function、array 保存在堆内存中，保存的是地址

9.原型链

原型是一个对象，为构造函数的实例共享方法和属性，所有实例引用的都是同一个原型对象

一个实例对象在调用属性和方法的时候，会依次从实例本身、构造函数原型、原型的原型上去查找

10.new操作符具体做了什么？

先创建一个空对象

把空对象和构造函数通过原型链进行链接

把构造函数的this绑定到空对象身上

根据构建函数返回的类型判断，如果是值类型，则返回对象，如果是引用类型，就返回这个引用类型。

11.js是如何实现继承的

原型链继承

借用构造函数继承

组合式继承

es6的class类继承

12.js中this指向问题

全局对象中的this指向的是window

普通函数中this指向全局window

this永远指向最后调用它的对象（非箭头函数）

new关键词改变了this的指向

apply、call、bind可以改变this指向（非箭头函数）

箭头函数中的this指向是其父类的this

匿名函数中的this指向window

13.script中async和defer有什么区别

没有async和defer，浏览器会立刻加载并执行指定脚本

有async，异步的，加载和渲染元素的过程将和script的加载和执行并行进行

有defer，加载和渲染元素的过程将和script的加载并行进行，所有元素解析之后才执行

14.setTimeout最小执行时间

setTimeout:4ms

setInterval:10ms

15.ES5和ES6的区别ECMAScript

ES5:

ES6:

16.ES6的新特性

新增块级作用域（let、const）

新增定义类的语法糖（class）

新增了symbol基本数据类型

新增解构赋值

新增函数参数默认值

数组新增了API

对象和数组新增扩展运算符

promise

新增模块化（import、export）

新增set和map数据结构

新增generator

新增箭头函数

17.call、apply、bind的区别

都是改变this指向和函数的调用

call、apply功能类似，只是传参方法不同

call传参是一个参数列表

apply传参是一个数组

bind传参后不会立刻执行，会返回一个改变this指向的函数，不能去做构造函数，这个函数可以传参bind()()

call方法性能比较好用的多

18.箭头函数和普通函数区别？

不能作为构造函数使用，不能用new

没有arguments

不能用call、apply、bind去改变this指向

没有原型

this指向外层第一个函数的this

19.let const var区别

let const：不存在变量提升、必须定义才能使用、存在暂时性死区的问题、存在块级作用域的内容、不能在同一个作用域内重复声明

var：存在变量提升

20.如何实现深拷贝

完全拷贝一个新的对象，在堆内存中开辟新的空间

主要针对引用类型数据

扩展运算符 {...obj}只能实现第一层

json.parse(json.stringify())，不会拷贝内部函数

利用递归函数实现

21.ajax是什么

创建交互式网页应用的网页开发技术

在不重新加载整个网页的前提下，与服务器交换数据并更新部分内容

通过xmlhttprequest对象向服务器发送异步请求，从服务器拿到数据之后，通过js操作dom的方式操作页面

创建xmlhttprequst对象

通过xmh对象里的open()方法和服务器建立连接

构建请求所需的数据，并通过xmh的send()发送给服务器

通过xmh的onreadystate change事件监听服务器和你的通信状态

接受并处理服务器响应的数据结果

把处理的数据更新到html页面上

22.get和post的区别

get参数会放在url上，安全性比较差，post是放在body中的

get刷新服务器或退回是没有影响的，post则会重新提交

get请求会被缓存，post则不会

get请求会保存在浏览器的历史记录中，post不会

get只能进行url编码，post则支持很多种

23.promise的内部原理和优缺点

Promise对象封装了一个异步操作并且还可以获取成功或失败的结果

Promise对象主要解决回调地狱的问题，之前如果异步任务比较多，同时他们之间有相互的依赖关系，就只能使用回调函数处理，这样就容易形成回调地狱，代码的可读性、可维护性差

有三种状态：pending初始状态，fulfilled成功状态，rejected失败状态

原理:构造一个promise实例，实例需要传递参数，这个参数有两个形参，分别都是函数类型，一个是resolve一个是reject

promise上还有then方法，用来指定状态改变时的确定操作，resolve是执行第一个函数，reject是执行第二个

24.promise和async await的区别

都是处理异步请求

promise是es6，async await是es7

async await是基于promise实现的，都是非阻塞性的

优缺点：

promise是返回对象，要用then，catch的方法处理和捕获异常，并且书写方式是链式，容易造成代码重叠，可维护性差

async await是通过try catch进行捕获异常

async await能让代码看起来像同步一样，只要遇到await就会立刻返回结果，然后在执行后面的操作

promise.then()会出现请求还没返回，就执行了后面操作

25.浏览器的存储方式

cookie 标准本地存储方式，兼容性好，存储量小，需要封装

localstorage 以键值对标准的人方式、操作方便、永久存储、兼容性好，保存值的类型被限定，隐私模式下不可读取

sessionstorage 页面关闭就会清理，会话级别的存储方式

indexedDB 键值对方式存储，存储方便

26.token存在哪儿

token：验证身份的令牌

如果存在localdtorage里，每次请求接口都要把它当作字段传给后台，容易被xss攻击

存在cookie中，会自动发送，但是不能跨域 27.页面渲染过程

dns解析

建立tcp连接

发送http请求

服务器处理请求

渲染页面

浏览器会获取html和css资源，把html解析成dom树

再把css解析成cssom

把dom和cssom合并为渲染树

吧渲染树的每个节点渲染到页面

断开tcp连接

1. JWT

json web token 通过json形式作为web应用中的令牌，可以在各方之间安全的把信息作为json数据输出

信息传输、授权

1. npm的底层环境

node package manager，是node的包管理和分发工具

npm组成：网站、注册表、命令行工具

1. 浏览器缓存策略

强缓存(本地缓存)、协商缓存(弱缓存)

强缓存:不发请求，直接使用缓存里的内容，浏览器把js、css、image等存到内存中，下次用户访问直接从内存中取，提高性能

弱缓存:需要向后台发送请求，通过判断是否使用协商缓存，如果内容没有变化，返回304，浏览器就用缓存里的内容

1. 什么是同源策略

浏览器的核心，没有同源策略会遭受网络攻击

主要指协议+域名+端口号三者一致，若其中一个不一样则不是同源，会产生跨域

img、link、script允许跨域加载资源

跨域是可以发送请求，后端也会正常返回结果，只是结果被浏览器拦截了

解决跨域：jsonp、cors、websocket、反向代理

1. 防抖和节流是什么

都是应对页面中频繁出发事件的优化方案

防抖：避免事件重复触发，在一定时间内只执行最后一次

节流：在一定时间内只执行一次

三、HTML/CSS

1.html5、css3有哪些新特性

H5：语义化标签、新增音视频标签、新增canvas、新增数据存储、新增了表单控件、新增拖拽释放api

css3：新增属性、伪类、伪元素选择器，新增媒体查询，文字阴影，边框，盒子模型box-sizing，渐变，过度，自定义动画，背景的属性，2d和3d

四、vue

1.v-if和v-show的区别

都可以控制元素的隐藏和显示

v-show是控制display的值来显示和隐藏

v-if是dom元素的的销毁和创建

2.如何理解mvvm

model-view-viewmodel的缩写，是一种设计思想，

model就是数据模型，用于定义数据修改和操作

view是视图

viewmodel是连接view和model的桥梁

当数据改变时，viewmodel通过监听到数据变化，自动更新视图，当用户操作视图时，viewmodel可以监听视图变化，通知数据进行改动。

viewmodel通过双向绑定把view和model连接起来，他们之间的同步是自动的

3.组件生命周期

创建

beforeCreate:属性和方法都不能使用

created:实例创建完成之后，可以使用和修改数据，但页面没有被渲染

挂载

beforemount:虚拟dom创建完成，即将渲染

mounted:把编译好的模板挂载到页面

更新

beforeUpdate:组件更新之前使用，数据是新的，页面上的数据是旧的，组件即将更新

updated:render重新渲染，数据和页面都是新的

销毁

beforeDestory:清除定时器等操作

destroyed:组件被销毁

使用keep-alive时多出两个

activited:组件激活时

deactivited:组件销毁时

4.在created和mounted去请求数据，有什么区别

created:渲染前调用，先初始化数据

mounted:渲染后调用，请求数据可能会出现闪屏，created不会

请求的数据对dom有影响，使用created，与dom无关，可以放在mounted

5.vue组件通信

父传子:props,$ref--引用信息对象会注册在父组件$refs对象上

子传父:￥emit---子组件绑定自定义事件，子组件绑定接收

兄弟传:全局事件总线$bus用on和emit来进行数据传输

6.keep-alive

是vue的内置组件，包裹组件时，会缓存不活跃的组件实例

防止重复渲染、减少加载时间和性能消耗

7.axios如何封装

下载axios----创建实例----封装请求和响应拦截器----封装接口-----使用

8.vue路由传参

params传参:this.$router.push({name:'',params:{}})

this.$route.params.id

路由属性传参

this.$router.push({name:'/${item.id}'})

路由配置{path:'/index:id'}

query传参

this.$router.push({name:'index',query:{}})

9.路由hash模式和history有啥区别

hash地址上有#，history没有

地址栏回车刷新时，hash会加载相应页面，history会报404

hash支持低版本浏览器，因为H5新增的API

hash不会重新加载页面

history有历史记录，可以通过pushState和replaceState(0)去修改历史记录，并不立刻发送请求

history需要后台配置

10.路由拦截

router.before e ach((to,from,next)=>{})

11.vue的动态路由

在路由配置里设置meta属性，扩展权限相关字段，在路由导航守卫里判断这个权限标识实现动态的增加和跳转路由

12.如何解决刷新后二次加载路由

window.location.reload()

matcher

cosnt router=createRouter()

export function resetRouter(){

const newRouter=creatRouter()

router.matcher=newRouter.matcher

}

13.vuex刷新页面数据丢失

vuex会重新获取数据

把数据保存在浏览器缓存里cookie、localstorage、session

页面刷新时，再次请求数据，动态更新vuex里面的数据

14.computed和watch区别

computed:计算属性，支持缓存，以来的属性值发生变化，计算属性会重新计算，否则用缓存，不支持异步，第一次加载就监听，函数中必须有return

watch:监听属性，监听data中数据的变化，不支持缓存，支持异步，第一次加载不监听，可以不用有return

15.vuex使用场景和属性

state:存储变量

getters:state的计算属性

mutations:提交更新数据的方法，同步

actions:异步操作

modules:模块化vuex

用户个人信息、购物车等

16.vue双向绑定的原理

通过数据劫持结合发布者订阅者模式，立勇object.defineProperty()劫持各个属性的setter和getter，在数据发生变化时发布消息给订阅者，触发相应的监听回调渲染视图

17.diff和虚拟dom

虚拟dom，描述元素与元素之间的关系，创建的一个js对象

如果组件内有响应的数据，数据发生改变时，render函数会生成一个新的虚拟dom，新的虚拟dom会和旧的虚拟dom进行比对，找到需要修改的虚拟dom内容，然后去对应的真实dom中修改

diff是虚拟dom对比时用的，返回一个patch对象来存储两个节点不同的地方，最后用patch里的记录信息更新真实dom

18.vue和jquery的区别

原理不同:vue就是数据绑定，jq时先获取dom在处理

着重点不同:vue是数据驱动，jq着重于页面

操作不同

19.vuex的响应式处理

触发事件的时候会通过dispatch来访问action中的方法，actions中的commit会触发mutations中的方法从而修改state里的值，通过getter把数据更新到视图

20.如何封装组件

使用Vue.extend()创建一个组件

使用Vue.components()方法注册组件

21.vue过滤器

插值表达式、v-bind可以使用过滤器

全局：Vue.filter

局部：和methods同级，filter

22.vue中强制刷新

localtion.reliad()

this.$router.go(0)

provide和inject

23.vue2和vue3

双向数据绑定原理不同：vue2使用defindpropty(),vue3使用proxy

支持碎片

API不同

定义数据变量方法不同，vue3---setup

生命周期不同

传值不同

指令和插槽不同

main.js不同

24.vue性能优化

不要把所有数据都放在data中

v-for给每个元素绑定事件用事件代理

keep-alive缓存组件

尽可能差分组件，提高复用性

key要保持唯一

合理使用路由懒加载

数据持久化存储尽量用防抖、节流优化

按需加载、内容懒加载、图片懒加载

骨架屏

seo优化：预渲染、服务端渲染ssr

cdn形式引入第三方模块、多线程打包、抽离公共文件

客户端缓存、服务端缓存、服务端Gzip压缩

25.首屏优化

使用路由懒加载

非首屏组件使用异步

首屏不重要的组件延迟加载

动态资源放在cdn

减少首屏js、css等资源文件大小

使用服务端渲染

减少dom数量和层级

使用精灵图请求

做一些liading

开启Gzip

图片懒加载

26.vue3比vue2好

diff算法优化

静态提升

事件侦听缓存

27.vue为什么使用proxy

proxy可以代理整个对象

代理对象的监听方法更丰富

代理对象会生成一个新的对象，不会修改对象本身

不兼容ie浏览器

28.seo如何优化

srr--服务端渲染

seo--优化搜索引擎

srr、预渲染prerender-spa-plugin