前端面试题

本文汇总了前端面试中常见的CSS选择器优先级、盒模型、JavaScript的闭包、内存泄漏、DOM操作、事件委托、数据类型检验、异步编程、ES6新特性、Vue组件通信等多个关键知识点,帮助开发者全面准备前端面试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

面试题

一.CSS

1.css盒子模型

在html页面中的所有元素都可以被看做为一个盒子。盒子的组成:有内容context、内边距padding、边框border、外边距margin。

盒模型的类型:

标准盒模型(margin+border+padding+context)

C3盒模型(margin+context(padding+border))设置padding和border不会撑开盒子 设置盒子的宽度和高度是多少就是多少

控制盒子模型的格式:box-sizing: content-box;(默认值:标准盒模型)和 box-sizing: border-box;(IE盒模型)

2.CSS选择器的优先级

CSS的特性:继承性、层叠性、优先级

优先级:在写css样式的时候,会给同一个元素添加多个样式,此时谁的权重高就显示谁的样式

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

3.隐藏元素的方法

display: none; 最常用的一种方法 使用这个元素直接消失,不占据空间位置

opacity: 0; 设置元素的透明度为0,元素还占有当前位置

visibity: hidden; 元素还占有当前位置,只是不可见

position: absolute;

clip-path

4.px和rem的区别

px:显示器上呈现画面的像素,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

rem:相对html根节点的font-size的值,可以直接给html节点的font-size:62.5%(1rem = 10px;(16px*62.5% = 10px))

5.重排和重绘

重排:回流,布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小

重绘:计算好盒模型的位置大小和其他的属性之后,浏览器会根据每个盒子的特性进行绘制

浏览器的渲染机制:对DOM的大小、位置进行修改后,浏览器需要重新计算元素的这些几何属性,就叫重排。对DOM的样式进行修改,比如color/background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,这里只触发了重绘。

6.让一个元素水平居中的方式有哪些

定位+margin

定位+transfrom

flex布局

grid布局

table布局

7.CSS的哪些属性可以被继承?哪些不可以被继承?

CSS的三大特性:继承性,层叠性,优先级

继承性:子元素可以继承父类元素的样式

例如:字体的一些属性:font、文本的属性:text line、元素的可见性:visibility:hidden、表格布局的属性:border-spacing、列表的属性:list-style、页面的样式属性:page、声音的样式属性

8.预处理器

css的弊端:不利于重复利用,写一些样式的时候重复用到一些属性不利于维护和扩展,于是增加了预处理器的

预处理器增加了变量、函数、混入等强大的功能,利于维护与扩展,提升开发效率

SASS和LESS

二.JS

1.JS由哪三部分组成

ECMAScript和DOM(文档对象模型)和BOM(浏览器对象模型)

ECMA是JS核心的内容,是js的基础语法描述了语言的基础语法var for 数据类型 字符串 数组

DOM:把整个HTML页面规划为元素构成的文档

BOM:对浏览器进行操作和访问

2.JS由那些内置对象

String、Boolean Number、Array、Object、Function、Math、Date、RegExp

Math:abs() sqrt() max() min()等方法

Data:new Data()实例化一个时间 getYear()

Array:

String:concat() length slice() split() 方法

3.操作数组的方法

Array

push()、pop()、sort()、splice()、unshift()、shift()、reverse()、concat()、join()、map()、filter()、ervey()、some()、reduce()、isArray()、findIndex()

那些会改变原数组:

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

4.JS对数据类型的检验的方式有哪些?

typeof() 只能判断基本数据类型

instanceof() 只能判断引用数据类型 不能判断基本数据类型

constructor 几乎可以判断基本数据类型 和引用数据类型 PS:如果声明了一个构造函数并把它的原型指向了Array的时候 就判断不出来了

Object.proptotype.toString.call() 完美解决方案!!

5.闭包和闭包的特点

函数嵌套函数,内部函数被外部函数返回并保存下来时,就会产生闭包

特点:可以重复利用变量,并且这个变量不会污染全局的一种机制,这个变量一直保存在内存中,不会被垃圾回收机制回收

缺点:对内存消耗,导致页面的性能下降,在IE浏览器中才会导致内存的泄露

使用场景:防抖,节流,函数嵌套避免全局污染的时候

6.前端内存泄漏怎么理解

JS里面已经分配内存地址的对象,但是由于长时间没有释放或者没办法清除会造成长期占用内存的现象,会让内存资源大幅浪费,最终导致运行速度慢,甚至崩溃

JS中有垃圾回收机制

因素:一些为生命直接赋值的变量,一些未清空的定时器;过度的闭包,一些引用元素没有被清除

7.事件委托是什么

事件委托:又叫事件代理,利用事件冒泡的机制来实现,把子元素的事件绑定到父元素上。

事件捕获:浏览器会从根节点=>事件源(由外层到内层)进行事件传播。

如果子元素阻止了时间的冒泡那么委托也不会存在(阻止事件冒泡:event.stopPropagation())

addEventListener(‘click’, 函数名, true/false) 第三个参数就是事件冒泡的开启情况 默认是false开启事件冒泡 。true开启事件捕获

好处:提高性能,减少事件的绑定,减少了内存的占用

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

基本数据类型:String Boolean Number undefined null

复杂数据类型:Object Function Array

基本数据类型是保存在栈内存中,引用数据类型是保存在堆内存中,栈内存中只保存地址值执行堆内存

假如两个引用类型同时指向了一个地址的时候,修改一个另一个也会变化!

9.原型链

原型就是一个普通的对象,为了构造函数的实例共享属性和方法。所有实例中引用的原型都是同一个原型对象

使用prototype可以把方法挂载在原型链上,内存只保存一份

__ proto __可以理解为指针,实例对象中的属性,指向了构造函数的元素(proptotype)

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

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

首先创建一个空对象,

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

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

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

11.JS如何实现继承

原型链继承

借用构造函数继承

组合式继承

ES6的class继承

12.JS的设计原理

JS引擎 运行上下文 调用栈 事件循环 回调

JS引擎把代码转换为电脑可以执行的代码,js调用一些API让浏览器可以执行,因为JS为单线程的,每次从调用栈取出代码调用,代码耗时的话会阻塞代码的运行,导致浏览器卡顿。回调函数通过加入事件队列里面等待事件循环,把其拿出来放入调用栈中执行,只有事件循环监听到调用栈为空的时候才会从事件队列里面拿出来,放入到调用栈里面去执行

13.JS中关于this的指向问题

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

全局作用域或者普通函数中的this:指向window

this永远指向最后调用它的哪一个对象,箭头函数除外

new 关键字 改变了this的指向

apply() call() bind() 可以改变this的指向,不是箭头函数

箭头函数中的this:指向在定义的时候已经确定了,找外层函数有的话箭头函数的this指向这个函数;没有外层函数就指向window

匿名函数中this:永远指向window

14.script标签里面的async和defer有什么区别

当没有async和defer这两个属性的时候,浏览器会立刻加载并执行指定的脚本

有async,加载和渲染后面元素的过程,将和script的加载和执行 并行进行(异步)

有defer,加载和渲染后面元素的过程,将和script的加载并行进行(异步),但是他的执行时间等所有元素解析完成之后才会执行

15.setTimeout最小执行时间是多少

最小执行时间是4ms

setInterval最小执行时间为10ms,小于10ms会调为10ms。(HTML5规定的内容)

16.ES6和ES5有什么区别

JS的组成:ECMAScript、DOM、BOM

ES5:ECMAScript5(全称),2009年ECMAScript的第五次修订,

ES6:ECMAScript6,2015年ECMAScript第六次修订,是js的下一个版本标准

17.ES6的新特性

新增块级作用域 let const:声明变量或者常量的方式,不存在变量提升(在变量声明前使用不了)存在暂时性死区的问题,存在块级作用域,不能再同一个作用域内重复声明

新增了定义类的语法糖 class

新增一种基本的数据类型 symbol:代表一个独一无二的值

新增了解构赋值:从数组或者对象中取值给变量赋值{ }

新增了函数参数的默认值

给数组新增了API

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

Promise:异步编程的解决方案,解决回调地狱的问题,自身有all,reject,resolve,race方法。原型上有then和catch把异步操作队列化,三种状态:pending(初始状态)、fulfilled(操作成功)、rejected(操作失败)状态只能由初始变为成功或者由初始变为失败。一旦发生变化状态就会凝固,不会再变。async和await:同步代码做异步的操作这俩必须搭配使用!会返回一给Promise对象

新增了模块化 import/export

新增了set和map数据结构:set唯一性 不重复,map key的类型不受限制

新增了generator

新增了箭头函数:不能作为构造函数使用,不能有new。箭头函数没有原型, 箭头函数没有arguments。箭头函数不能用call apply 和bind改变this指向。this指向外层第一个函数的this

18.call,apply,bind有什么区别

都是改变this指向和函数的调用,call和apply的功能类似,只是传参的方法不同

call方法传的是一个参数的列表,性能比apply好一些,所以call用的多一点

apply方法传的是一个数组

bind方法传参后不会立刻执行,会返回一个改变face指向的函数,这个函数还是可以传参的,bind()()才可以调用

19.用递归的时候有没有遇到什么问题

栈内存溢出

写递归的时候一定要注意写结束条件!return

20.如何实现深拷贝

深拷贝:主要针对引用数据类型,完全拷贝一个新的对象,在堆内存中开辟一个新的空间,拷贝的对象被修改后原对象不会受影响

扩展运算符:缺点只能针对第一层,多层无法实现!

JSON.parse(JSON.stringify()):没有办法拷贝内部函数

利用递归函数实现:完美实现

21.说一下循环事件

js是一个单线程的脚本语言,主线程(同步任务),执行栈,任务队列,宏任务,微任务

主线程要先执行同步任务,在执行任务队列中的检查有没有微任务没有执行宏任务,有的话执行微任务

全部执行完之后等主线程的调用,调用完之后再去任务队列查看是否有异步任务,这样一个循环往复的过程就是事件循环

22.ajax是什么?怎么实现的?

创建交互式网页应用的网页开发技术,在不重新加载整个网页的前提下与服务器交换数据并更新部分内容!

通过XMLHttpRequest对象,向服务器发送异步请求,从服务器拿到数据后通过js操作DOM更新页面

步骤:创建XMLHttpRequest对象。通过其中的open方法和服务器建立连接,构建请求所需的数据并通过xmh对象的send()发送给服务器,通过xmh对象的onreadystate chansge事件监听服务器和客户端的通信状态,接收并处理服务器响应的数据结果,把处理的数据更新到新的HTML页面上。

23.get和post有什么区别

get一般是获取数据,参数会放在url上,所以安全性比较差,请求刷新服务器是没有影响的,会被缓存,只能进行url编码

post一般是提交数据,参数会放在body中,post请求退回时会重新提交数据,不会被缓存,post请求支持很多种方式的编码

24.Promise的内部原理是什么?有什么优缺点?

Promise主要是解决回调地狱的问题,之前如果异步任务比较多,同时他们之间有相互依赖的,就只能使用回调函数处理,这样就容易形成回调地狱 的问题,可维护性和可读性很差,有三种状态:pending(初始状态)、fulfilled(操作成功)、rejected(操作失败)

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

Promise上还有then方法,这个方法解释用来指定状态改变时的确定操作了,resolve是执行第一个函数,reject是执行第二个函数,一旦发生改变就不会再变回去!

25.promise和async await的区别

都是处理异步请求的方式,

Promise是ES6的语法,

async和await是ES7的语法,是基于Promise实现的,他和promise都是非阻塞性的

promise是返回对象要使用then和catch方式去处理和捕获异常,并且书写方式是链式,容易造成代码重叠,不好维护,async,await是通过try catch方式捕获异常的 。

async和await最大的优点就是可以让代码看起来像同步一样,只要遇到await就会立刻返回结果,然后执行后面的操作。

Promise只能通过.then方式返回,会出现请求还没返回,就执行了后面的操作

26.浏览器的存储方式

cookies:h5标准前的本地存储方式,兼容性好,请求头自带cookie,储存量小,浪费资源,使用麻烦

localtorage:H5加入的以键值对为标准的方式,操作方便,永久储存,兼容性好,保存值类型被限定,浏览器在隐式模式下不可被读取,不能被爬虫

sessionstorage:当前页面关闭后,会被清理

indexedDB:h5标准的存储方式,他是以键值对进行存储,可以快速读取,适合WEB场景

27.token存在sessionstorage还是localstorage

token:验证身份的令牌,用户通过账号密码登陆后,服务器把这些凭证通过加密等一系列操作后得到的字符串

存localstorage:后期每次请求接口都要把它当作一个字段传给后台(一般存在这里),不要把一些敏感的 东西存到这里会被XSS攻击

存cookie中,自动发送 缺点不能跨域,存在这里会有CSRF攻击

存sessionstorage中

28.token的登录流程

客户端试用账号密码登录,服务端收到请求后需要验证账号密码,验证成功之后,服务端会签发一个token发送给客户端,客户端会把token保存起来,可以放在cookie或者localstorage中,客户端每次向服务器请求资源都得携带token,服务器每次收到请求会验证token验证成功才会返回给客户端请求的数据

29.页面渲染的过程

DNS解析,建立TCP链接,发送HTTP请求,服务器处理请求,渲染页面,断开TCP链接

渲染页面的过程:浏览请会获取HTML和CSS资源,然后把HTML解析成DOM树,再把CSS解析成CSSOM,把DOM和CSSOM合并成渲染树,布局,把渲染树的每个节点渲染到屏幕上

30.DOM树和渲染树有什么区别

DOM树和HTML标签一一对应,包括head和隐藏元素

渲染树不包含head和隐藏元素

使用的时间节点不一样

31.精灵图和base64的区别是什么

都是处理图片的形式

精灵图:把多张小图片整合到一张大图片上,利用定位的一些属性把小图片显示在页面上,当访问页面时可以减少访问次数,提高加载速度。

base64:传输8Bit代码的编码方式,把原本的二进制转为64个字符的单位,随后组成字符串,它会和HTML和CSS一起下载到浏览器中国,减少请求,减少跨域问题,但是一些低版本不支持,若base64体积比原图片大,不利于CSS的加载

32.svg格式、

基于XML语法格式的图片格式,可缩放的矢量图,其他图像是基于像素的,SVG是属于对图像形状的描述,本质是文本文件,体积小,并且不管放大多少倍都不会失真

SVG可直接插入页面中,称为DOM一部分,然后用JS或CSS进行操作< svg > < /svg >

SVG可以作为文件被引入img src=”pic.svg“

SVG可以转为base64引入页面

33.JWT认证协议

JSON WEB Token的简写,通过JSON形式作为web应用中的令牌,可以在各方之间安全的把信息作为JSON对象进行传输,用于安全的数据传输。可用于信息传输,授权。

流程:前端把账号密码发送给后端的接口;后端核对账号密码成功后把用户的信息作为JWT负载,把它和头部分别进行base64编码拼接后签名,形成一个token;前端每次请求时都会把JWT放在HTTP请求头的Authorization字段内;后端会检查是否存在,如果存在就验证JWT的有效性;验证通过后后档使用JWT包含的用户信息进行其他的操作,并返回对应的结果,简介,包含性。因为TOken是JSON加密的形式保存在客户端,所欲iJWT是跨语言的,原则上是任何web形式都支持!

34.npm的底层环境是什么

node package manager ,node的包管理和分发工具,已经成为分发node模块的标准,是JS的运行环境

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

35.HTTP协议规定的 协议头和 请求头有什么

请求头信息:Accept:告诉服务器支持的数据类型;Host:告诉服务器要访问哪一台主机;Referer:浏览器告诉服务器从哪里来的(防盗链);User-Agent:浏览器告诉服务器浏览器的类型和版本信息;Date:浏览器告诉服务器是什么时候访问的;Connection:连接方式;Cookie;X-Requset-With:请求方式

响应头信息:Location:告诉浏览器要求找谁,Server:告诉浏览器服务器的类型;Content-Type:告诉浏览器返回的数据类型;Refresh:控制浏览器的定时刷新

36.浏览器的缓存策略

强缓存:本地缓存;不发起请求直接使用缓存里面的内容,浏览器把JS,CSS,image存到内存中下次用户访问直接从内存中取,提高性能。触发:在Http1.0:时间戳响应头标记。Http1.1:Cache-Control响应标头

弱缓存:协商缓存;通过判断是否使用协商缓存,如果请求内容没有变化,则返回304,浏览器就使用缓存中的内容。触发:在Http1.0:请求头:if-modified-since,响应头:last-modified。Http1.1:请求头:if-modified-match 响应头:Etag

37.同源策略

http:// www. aaa.com: 8080 /index/vue.js

协议 子域名 主域名 端口号 资源

同源策略:浏览器的核心,如果没有这个策略就会遭受网络攻击,主要指协议、域名、端口号三者都一致,就叫做同源策略!

如果其中一个不一样则不是同源会产生跨域,

解决跨域问题有:Jsonp和cores,反向代理

跨域可以正常发送请求,后端也会正常返回结果,只不过这个结果被浏览器拦截了

38.防抖和节流

都是应对页面中频繁触发事件的优化

防抖:避免事件重复触发,触发事件时间会重新计时。使用场景:频繁和服务器交互,输入框的自动保存

节流:把频繁触发的事件减少,每隔一段时间执行。使用场景:scroll事件

39.解释一下什么是json

是一种村字符串的数据,适合在网络中传输,本身不提供任何方法。JSON数据存储在.json文件中,也可以把JSON数据以字符串的形式保存在数据库中,Cookies中。JS提供JSON.parse(json字符串):把JSON转换为js对象(反序列化) 和 JSON.Stringift({},[],“”):将数据序列化为JSON格式

什么时候使用JSON:定义接口的时候;序列化:生成token;配置文件

40.当数据没有请求过来的时候,该怎么做?

可以在渲染数据的地方给一些默认的值(if判断语句)

41.大文件上传是怎么做的

分片上传:先把需要上传的文件按照一定的规则,分割成相同大小的数据块;初始化一个分片上传任务,返回本次分片上传的唯一标识;按照一定的规则把各个数据块上传;发送完成后,服务器根据数据上传的完整性,如果完整,那么会把数据库合并成原始文件。

断点续传:服务器返回,从哪里开始 浏览器自己处理

三.HTML5与CSS3

1.语义化的理解

在写HTML页面结构的时候,所用的标签有意义

例如:头-header,底部-footer……

怎么判断页面是否语义化:
把CSS去掉看页面是否还能看出来页面的 结构,显示内容是否正常

为什么要使用语义化:

让HTML结构更加清晰明了,方便团队协作,利于开发;有利于爬虫和SEO;浏览器能更好的解析代码;给用户带来良好的体验

2.H5C3有那些新特性

H5的新特性:语义化标签,新增了音频,视频标签;增加了画布canvas;增加了数据存储localstorage和sessionstorage;增加了表单控件email url search…;拖拽API

CSS3新增:增加了属性选择器,伪类选择器,伪元素选择器;增加了媒体查询;文字阴影,边框,盒子模型box-sizing;渐变;过度;自定义动画;背景的属性;2D和3D

3.rem是如何做适配的

通常用于做移动端的适配,相对根元素(html)的font-size属性来计算大小。

rem根据根元素font-size计算值的倍数,比如html上的font-size: 16px,之后给div设置宽为1.5rem(1.5 * 16px),

4.解决了那些移动端的兼容性问题

当设置样式overfloe: scroll/auto时,IOS上滑动会卡顿:-webit-overfloe-scrolling: touch;

在安卓环境下设置placeholder文字设置行高时会偏上:input有placeholder属性的时候不要设置行高

移动端字体小于12px时异常显示:先把整体的放大一倍,然后再使用transfrom进行缩小

ios下input按钮设置了disabled属性为true显示异常:input[type=button]{ opcity: 1 }

安卓手机下取消语音输入按钮:input:: -webkit-input-speech-button{ display: none}

ios下取消input输入框在输入英文首字母默认大写:input标签中添加这两个属性autocapitalize=‘off’ autocorrect=‘off’

禁用ios和安卓用户的选中文字功能:添加全局CSS样式:-webkit-user-select: none

禁止ios弹出各种弹窗:-webkit-touch-callout: none

禁止ios识别长串数字为电话:添加meta属性<meta conten=‘telephone=no’ name=‘format-detection’

四.Vue

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

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

v-show:控制元素的display值来控制元素的显示和隐藏,只是简单的css切换,切换效率比v-if高

v-if:真正的条件渲染,添加/删除DOM元素,有一个局部编译/卸载过程的,切换这个过程中会适当的销毁和重建内部的事件监听和子组件,切换效率比较低,

2.如何理解MVVM

Model-View-ViewModel的缩写,前端开发的框架模式

M:模型,对应的就是data数据

V:视图用户界面,DOM

VM:视图界面:vue的实例对象,链接VIew和Model的桥梁,核心是提供双向数据绑定,不需要人为操作

3.v-for中的key值的作用?

key属性是DOM元素的唯一标识,作用:为了提高虚拟DOM的更新,提高性能;不设置key可能会触发bug;为了触发过渡效果

4.说一下vue的生命周期

组件从创建到销毁的过程就是它的生命周期

创建:

beforeCreated:在这个阶段属性和方法都不能使用

created:这里实例创建完成之后,完成了数据检测,可以使用数据,修改数据,不会触发updated,也不会更新视图

挂载:

beforeMount:完成了模板的编译,虚拟DOM完成创建,即将渲染;修改数据,不会触发updated

mount:把编译好的模板挂载在页面,可以发送异步请求,也可以访问DOM节点

更新:

beforeUpdate:组件数据更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以改数据

updated:render重新做了渲染,这是数据和页面都是新的,

销毁:

beforeDestory:实例销毁前,实例还可以使用,做一些收尾的工作,

destoryed:组件已经被销毁,全部都销毁了

使用keep-alive时多出两个周期:

activited:组件激活时

deactivited:组件被销毁时

5.在created和mounted去请求数据,有什么区别?

created:在渲染前嗲用,通常初始化属性,然后渲染

mounted:在模板渲染完成后,一般都是初始化页面后,在对元素节点进行操作,在这里请求数据会出现闪屏的问题

一般用created中去请求数据,请求的数据对DOM有影响就在created中请求,反之就在mounted中请求数据

6.vue中的修饰符有哪些?

事件修饰符:

.stop阻止冒泡

.prevent阻止默认行为

.capture内部元素触发事件现在此处理

.self只有在event.target是当前元素时触发

.once事件只会触发一次

.passive立即触发默认行为

.native把当前元素作为原生标签看待

按键修饰符:

.keyup键盘弹起

.keydown键盘按下

系统修饰符:

.ctrl

.art

.meta

鼠标修饰符:

.left鼠标左键

.right鼠标右键

.middle鼠标中键

表单修饰符:

.lazy 等输入完之后再显示

.trim 删除内容前后的空格

.number 转为数字

7.vue如何进行组件通信

父传子:子组件通过props属性来接受父组件中的自定义属性;ref:引用信息会注册在父组件的ref:引用信息会注册在父组件的ref:引用信息会注册在父组件的refs对象上

子传父:$emit子组件绑定自定义事件,触发执行后,传给父组件。父组件需要用事件监听来接收参数

兄弟传值:用一个事件eventBus

vuex传值:共享数据!

8.elementui是怎么做表单验证的?

在表单中加rules属性,然后再data里写校验规则

内部添加规则

自定义函数校验

9.keep-alive是什么?怎么使用?

vue的一个的内置组件,包裹组件的时候,会缓存不活跃的组件实例,并不是销毁他们

作用:把组件的状态保存在内存里,防止重复渲染DOM节点,减少加载时间和性能小号提高用户体验

10.axios是怎么封装的?

下载,创建实例 接着封装请求的响应拦截器 抛出 最后封装接口

11.vue路由怎么传参

params传参:

传出:this.$router.push({name:‘index’, params:{id: item.id}})

获取:this.$router.params.id

路由属性传参:
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …({name:'/index/{item.id}'})

路由配置 {path: ‘/index:id’}

query传参,好处:可以解决页面刷新数据参数丢失。数据保存在地址中

this.$router.push({

​ name: ‘index’,

​ query: {id: item.id}

})

12.vue路由的hash模式和history模式有什么区别

hash路由地址上有#,history模式没有;造作回车刷新的 时候,hash模式会加载对应的页面,history会报错404;hash支持低版本浏览器,histroy不支持,因为是H5新增的API;hash重新加载页面,单页面应用必备;history有历史记录的,H5新增了pushState和replaceState()去修改历史记录,并不会立刻发起请求;histroy需要后台进行配置

13.vue的过滤器怎么使用

vue的一个特性,用来对文本进行格式化处理,一个是插值表达式,一个是v-bind,分类:全局过滤器,私有过滤器:和methods同级filter:{}

14.说一下vue的动态路由?

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

根据用户登录的账号,返回用户角色

前端在根据角色,跟路由表的meta.role进行匹配,把匹配搭配的路由形成可访问的路由

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

window.location.reload()

matcher

const router = createRouter()
exportfunction resetRouter() {
    const newRouter = creatRouter()
    router.matcher = newRouter.matcher
}

16.vuex刷新数据会丢失吗?

vuex肯定会重新获取数据,页面也会丢失数据

数据直接保存在浏览器的缓存里(cookie,localstorage sessionstorage)

页面刷新的时候,再次请求数据,达到可以动态更新的方法,具体流程:监听浏览器的刷新数据,在刷新前把数据保存到sessionstorage里,刷新之后请求数据,请求到了用vuex,如果没有那就用sessionstorage里的数据

17.computed和watch的区别?

computed:计算属性,支持缓存的,依赖的属性值发生变化,计算属性才会重新计算;不支持异步操作;第一次加载就监听;函数中必须有return

watch:监听,监听的是data数据中的变化,不支持缓存;可以异步操作;第一次不监听

18.vuex在什么场景适合使用,属性有哪些?

state:存储变量/数据

getters:state的计算属性

mutations:提交更新数据的方法

actions:和mutation差不多,提交mutation来修改数据,可以包括异步操作

modules:模块化vuex的仓库

使用场景:用户的个人信息、购物车、订单模块

19.vue的双向数据绑定原理是什么!

通过数据劫持和发布订阅者模式来实现,同时利用Object.defineProperty(),劫持各个属性的setter和getter,在数据发生改变的时候发布消息给订阅者,触发对应的监听回调渲染视图,也就是说数据和视图是同步的,数据发生改变视图也会跟着改变,视图改变数据也会发生改变。

第一步:需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter

第二步:compile模板解析指令,把模板中的变量替换成数据,然后初始化渲染视图,同时把每个指令对应的节点绑定上更新函数,添加订阅者,如果数据变化收到通知,更新视图

第三步:Watcher订阅者是Observer和Compile之间的通信桥梁,作用:在自身实例化 的时候往订阅器内添加自己;自身要有一个update()方法;等待属性变动时调用自身的update方法,触发compile这种回调

第四步 :MVVM作为数据绑定的入口,整合了observer、compile、watch三者,通过observer来监听自己的数据变化,通过compile解析模板指令,最后用watcher把observer和compile联系起来,最终达到数据更新 视图更新,视图更新数据更新的效果

20.了解diff算法和虚拟DOM吗

虚拟DOM,描述元素和元素之间的关系,创建一个JS对象,如果组件内有响应数据,数据发生改变的时候,render函数会生成一个新的虚拟的DOM,这个新的虚拟的DOM会和旧的虚拟DOM进行比对,找到想要修改的虚拟DOM内容,然后去对应的真实DOM中修改

diff算法:就是虚拟DOM的比对时用的返回一个patch对像,这个对象的作用就是储存两个节点不同的地方,最后用patch里记录的信息进行更新真实DOM

步骤:JS对象表示真实的DOM结构,要生成一个虚拟DOM,再用虚拟DOM构建真实DOM树,渲染在页面上;状态改变生成新的DOM,就会跟虚拟DOM进行对比,这个对比的过程就是diff算法,利用path记录差异;把记录的差异用在第一个虚拟DOM生成的真实DOM上,视图就实现更新了

21.vue和Jquery的区别是什么?

原理不同,vue是数据绑定,jq是先获取DOM在处理

着重点不同,vue数据驱动,jq是注重于页面

操作不同,jq只是js一个库

未来发展不同,vue需求量比jq大

22.vuex的响应式处理

vuex是vue状态管理工具,vue中直接触发methods中的方法,vuex是不可以的。为了处理异步,当触发事件的时候会通过dispatch来访问actions中的方法,actions中的commit会触发mutations中的方法从而修改state里的值,通过getter把数据更新到视图。Vue.use(vuex),调用install方法,通过applyMinxin(vue)在任意组件内执行this.$router就可以访问到store对象。vuex的state是响应式的,借助的就是vue的data,把state存到vue实例组件的data中。

23.vue中遍历全局的方法有哪些?

普通遍历:对象.foreach()

对元素统一操作 对象.map()

查找符合条件的元素 对象.filter()

查询符合条件的元素索引,返回索引,对象.fundIndex()

对象.some() 遇到符合条件的 就停止

对象,evening() 遇到不符合的对象会停止

24.如何搭建一个脚手架

下载node cnpm webpack vue-cli

创建项目:找到对应的文件然后利用node指令创建(cmd),输入vue init webpack xxxx,回车输入项目描述,作者回车,选择vue build,回车,输入n,不安装yarn,输入npm run dev

25.如何封装一个组件

使用Vue.extend()创建一个组件,使用Vue.components()方法注册组件,如果子组件需要数据,可以在props中接收定义,子组件修改好数据,要把数据传递给父组件,可以用emit()方法

原则:功能拆开,尽量让组件原子化,一个组件做一件事情,容器组件管数据,展示组件管视图

26.封装一个可复用的组件,需要满足什么条件?

低耦合,组件之间的依赖越小越好;最好从父级传入信息,不要再公共组件中请求数据;传入的数据一定要校验,处理事件的方法写在父组件中

27.vue如何做强制刷新

location.reload()

this.$router.go(0)

provide和inject

28.vue3和vue2有那些区别

双向数据绑定的原理不同

vue2只能有一个根节点,vue3可以有很多的节点

API不同,vue2是选项式API,vue3是混合型API

定义数据变量方法不同

生命周期不同

传值不同

指令和插槽不同

main.js不同

29.vue如何做性能优化

编码优化:不要把所有数据都放在data中,v-for是给每个元素绑定事件用事件代理,keep-alive缓存组件尽可能拆分组件提升复用性、维护性。key值保持唯一,合理使用路由懒加载,异步组件。数据持久化储存的使用尽量用防抖和节流优化

加载优化:按需加载,内容懒加载,图片懒加载、

用户体验:骨架屏

SEO优化:预渲染,服务端渲染SSR

打包优化:CDN形式加载第三方模块,多线程打包,抽离公共文件

缓存和压缩:客户端和服务器缓存,服务端Gzip压缩

30.首屏优化该怎么做

使用路由懒加载,非首屏组件使用异步组件,首屏不重要的组件用延迟加载显示,静态资源放在CDN上,减少首屏上JS、CSS等资源文件的大小,使用服务端渲染,尽量减少DOM数量和层级,使用精灵图请求,做一些loading效果,开启Gzip压缩,图片懒加载

31.vue3的性能为什么比vue2好

diff算法的优化,静态提升,事件监听缓存

32.vue3为什么使用proxy

proxy可以代理整个对象,defineproperty只代理对象上的某个属性;peoxy对代理对象监听更加丰富;proxy代理对象会生成新的对象,不会修改被代理对象本身;proxy不兼容ie浏览器

33.对组件的理解

一个可以重复使用的vue实例,有独一无二的组件名称,可以抽离单独的公共模块,提高代码的复用率

34.如何规划项目文件

public:存放图片、图标、index.html

src:api文件(封装请求的API文件),assests(),components(按分类划分此目录),plugins,router,static(静态资源),style,utils,views

App.vue

main.js

package.json

vue.config

35.SEO如何优化?

SEO:优化引擎,只能是优化不能是彻底的解决

SSR:服务端渲染

预渲染:prerender-spa-plugin 生成静态的页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来地球玩啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值