面试题（2021-12）

JavaScript

1.闭包的概念：什么是闭包，有什么优缺点，如何释放 在项目中拿闭包来干嘛：

Vue data是一个典型的闭包 return

函数内部定义函数，连接函数内部和外部的桥梁,内层函数引用着外层函数的变量 无法释放 形成闭包,闭包就是能够读取其他函数内部变量的函数

优点：防止全局污染   缺点：消耗内存

释放：javaScript闭包变量对象中未用到的属性,js引擎会释放其占用的内存空间

参考答案：js闭包实例汇总 - front-gl - 博客园

2.面向对象开发有哪些主要特征

封装 继承 多态  面向对象的特征是什么-常见问题-PHP中文网

3.什么是原型链，原型对象

原型对象：每一个对象上，都有一个属性，叫__proto__，它指向了一个对象，这个对象我们叫原型对象。

原型链：原型链指查找对象上某个属性的查找机制，查找一个对象上的私有属性，先在自己的私有属性中找，找不到，就沿着__proto__去原型对象上找

原型对象和原型链_小召小召的博客-CSDN博客_原型对象和原型链

4.什么是作用域，作用域链  

作用域:一个变量可以访问的范围  全局作用域 局部作用域 块级作用

作用域链：调用某个函数或属性时，先在当前作用域寻找，如果找不到的情况下去父级寻找，如果父级找不到继续向上级寻找，直到找到全局作用域为止，这就是作用域链

5.数组常用API

1.push()从数组的尾部插入一个或多个元素，会修改原数组，返回新数组长度

2.pop()从数组的尾部删除一个元素，会修改原数组，返回被删除的元素

3.unshift() 从数组的头部插入一个或多个元素，会修改原数组， 返回新数组长度

4.shift() 从数组的头部删除一个元素

5.slice(start, end)  start:开始下标, end:结束下标(end切不到) ，不会修改原数组，返回裁切出来的数组

6.splice(start, length, [可选参数列表])  start:开始裁切的下标, length:要裁切多少个

7.concat([多个参数]) 连接一个或多个数组，  不会修改原数组，返回连接过后的数组

8.join("连接符");  以特定的连接符, 把数组连接成字符串

9.reverse() 反转数组, 把数组的顺序进行颠倒

10.filter() 过滤数组方法, 里面接受一个回调函数， 不修改原数组，会创建新数组, 接收过滤出来的满足条件的元素, 并且返回这个数组

11.map() map数组方法, 里面接受一个回调函数，不修改原数组，返回一个新数组, (为原数组的每一项经过函数处理后的返回值)

12.forEach(function(ele, i, array)){ //业务逻辑 } 把forEach当成for循环来使用, forEach就是用来遍历数组的

13.lastIndexOf(要查找的元素, 指定下标)

6.什么是事件冒泡/事件捕获

事件冒泡：事件被触发时一层一层往上传递到window对象

事件捕获：与事件冒泡相反，由外到里

解决方法：

(1)通过返回false来取消默认的行为并阻止事件起泡。

        (2)通过使用 preventDefault() 方法只取消默认的行为

(3)通过使用 stopPropagation() 方法只阻止一个事件起泡。

7.什么是构造函数

Function Aaa（name）{

 This.name = name;

}

通过  new 函数名   来实例化对象的函数叫构造函数

js构造函数详解 - 长安城下翩翩少年 - 博客园

8.es6有哪些新特性

ES6:let const; 箭头函数;模板字符串;promise;解构赋值;数组新增的法:forEach,map,filter,some,every,indexOf;参数默认值,模块的导入和导出。

9.var、let和const 的区别是什么

（1）块级作用域：let和const具有块级作用域，var不存在块级作用域。

（2）变量提升：var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否则会报错。

（3）给全局添加属性：浏览器的全局对象是window，Node的全局对象是global。var声明的变量为全局变量，但是let和const不会。

（4）重复声明:var声明变量时，可以重复声明变量,const和let不允许重复声明变量。

（5）暂时性死区：在使用let、const命令声明变量之前，该变量都是不可用的。这在语法上，称为暂时性死区。

（6）初始值设置：在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

（7）指针指向:let和const都是ES6新增的用于创建变量的语法。 let创建的变量是可以更改指针指向（可以重新赋值）。但const声明的变量是不允许改变指针的指向。

10.普通函数和箭头函数的区别

(1)箭头函数比普通函数更加简洁

(2)箭头函数没有自己的this

(3)箭头函数继承来的this指向永远不会改变

(4)call()、apply()、bind()等方法不能改变箭头函数中this的指向

(5)箭头函数不能作为构造函数使用

(6)箭头函数没有自己的arguments

(7)箭头函数没有prototype

(8)箭头函数不能用作Generator函数，不能使用yeild关键字

11.不同场景下，this指向有哪些

(1)在全局中this指向window

(2)在函数中(普通函数)，this永远指向调用他的那个对象

(3)在箭头函数中，箭头函数中没有this，使用的this就是箭头函数父级的this。

(4)在构造函数中，this指向构造出来的实例。

12.什么时候用that

Let that = this;

原因：this指向的对象发生了变化，故需要在函数前将this指向的对象提前保存一下为了避免这种问题，我们可以用that来指向，就是把this指向that，把this复制一份，给that，这样的话下面的that所表示的就一直是原先第一次指定的那个对象了

getList(){

 Let that = this;

 that

}

13.如何判断一个变量是否为数组/对象

(1)用Object.toString()方法判断

(2)通过Array.isArray()可以判断一个对象是否为数组

(3)判断原型

(4)判断构造函数

14.什么是跨域？为什么会导致跨域？在实际开发过程中，有哪些方法解决

什么是跨域,为什么浏览器会禁止跨域，以及实现跨域的几种方式_weixin_30536513的博客-CSDN博客

浏览器出于安全考虑 要求前后端 协议 域名 端口 一定要一致 只要有一个不一样就会违反同源策略 造成跨域问题

跨域：浏览器的一个安全策略 同源策略 约定 域名 主机 端口号一致 不然就会触发同源策略 导致跨域

解决跨域的手段： JSONP （vue里面安装一个jsonp插件)    Cors跨域

Proxy 代理跨域  正向代理 接口转发 vue.config.js    Nginx 反向代理

15.常见的http状态码有哪些？代表什么

    (1)信息代码：1xx：信息，请求收到，继续处理；

(2)成功代码：2xx：成功，行为被成功地接受、理解和采纳；

(3)重定向：3xx：重定向，为了完成请求，必须进一步执行的动作；

(4)客户端错误：4xx：客户端错误，请求包含语法错误或者请求无法实现；

(5)服务器错误：5xx：服务器错误，服务器不能实现一种明显无效的请求；

16.防抖和节流的概念，应用场景

函数防抖(debounce)：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

函数节流(throttle)：就是指连续触发事件但是在 n 秒中只执行一次函数

17.js中的事件队列

 Js事件循环 eventLoop 什么是宏任务 微任务

在JavaScript中，任务被分为两种，一种宏任务（MacroTask），一种叫微任务（MicroTask）

常见的宏任务：script全部代码、setTimeout、setInterval

常见的微任务：Promise中then的回调函数、MutationObserver、Process.nextTick

18.数组去重有哪些方法

 https://www.jb51/article/118657.htm  

原数组去重 还是去重后返回一个新数组 不影响原来的数组

(1)ES6 Set方法

(2)双重循坏，外层循环元素，内层比较值，返回新数组

(3)双重循环，当值相同时用splice方法截取（对原数组修改）

(4)递归，sort排序后进行比较，值相同则删除

(5)indexOf和forEach，利用indexOf查找是否存在相同值，forEach遍历返回新数组

(6)利用对象的属性不能相同的特点进行去重

19.get和post的区别

1.url可见性：get是可以看到传递的参数，post传参方式参数URL不可见。

2.传输数据大小：get传递数据最大长度是2048个字符。post没有长度限制。

3.后退页面：get后退不会有影响，post后退会重新进行提交。

4.缓存：get请求可以被缓存，post不可以被缓存

5.编码方式：get请求只URL编码，post支持多种编码方式

6.历史记录：get请求的记录会留在历史记录中，post请求不会留在历史记录

7 字符类型：get只支持ASCII字符，post没有字符类型限制

20.在团队协作中，git冲突怎么解决

 冲突是怎么来的？

场景： 星星和章章负责同一个模块进行协同开发 今天星星在这个模块下的第200行写了一行console.log(‘章章好帅‘) 星星一天的开发任务就搞完了 add . commit push 章章今天刚好请假了 第二天来了 章章忘记了一件事情 就是拉去昨天星星的最新的代码 git pull章章的还是旧的代码 第200行那里是没有星星昨天写的代码的 写了一行代码

Add. Commit -m push有事了 命令行爆红 说有一个报错是 冲突conflict

解决冲突方法：

方法1： 每天坚持开发前拉取一下最新的代码 你要提前备份好你的代码 但是如果这个模块只有你一个人开发 就没有冲突可言

方法2：当你用vscode可视化git 命令行 可视化git软件

21.session和cookie和token的区别 权限 后端识别用户身份的 鉴权  JWT(Json Web Token)认证

(1)cookie数据存放在客户的浏览器上，session数据放在服务器上。

(2)cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗考虑到安全应当使用session。

(3)session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。

(4)单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

22.什么是深浅拷贝

   (1)浅拷贝：只是拷贝了基本类型的数据；而引用类型数据，复制之后也是会发生引用。

(2)深拷贝：在计算机中开辟一块新的内存地址用于存放复制的对象；

深拷贝的实现方式：

① 递归去复制所有层级属性。

②借用 JSON 对象的 parse 和 stringify。

③借用 jQuery 中 extend 方法。

23.Promise有几种状态，有哪些方法

promise：js里面 es6新特性 异步解决方案的一种 解决之前callback方式形成回调地狱 经常拿来封装异步相关的代码的

   三个状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）、Rejected（已失败）

在项目中怎么使用promise：

   New promise 封装一个异步函数 最后向函数外部返回一个promise对象

   可以在调用这个异步函数的时候 使用promise的方法去处理

Promise常用的方法：

.then

.catch

.all(当一个页面 要同时发送多个请求的时候 就要用all)  

.race(赛跑 谁快就得到谁)

24.如何中断一个异步请求

axios有cancel方法的

Fetch的AbortController,

Axios.cancel()

Ajax.abort()

25.如何解决回调地狱问题

Promise async+await await其实也是一个promise对象  外面就可以用.then（res）.catch（err）做错误处理

26.sessionStorage在不同标签页下，数据是否共通

不同页面是数据不能够共享的 不同页面指的是两个tab 再新的一页打开

27.token怎么获取怎么存怎么用

Local sessionStorage axios请求拦截 head.config请求头 携带上token

28.改变this的几种方式

call()        apply()       bind()

29.apply/call/bind 有什么区别

(1)传参方式不同，call()是按照顺序传参，apply()是通过数组/伪数组传参。

(2)执行机制不同，call()和apply()是立即执行函数，bind()不会立即执行函数，而是会返回一个修改过this的新函数。

30.简述一下es6中，类的概念

Class 简化构造函数的  跟es5 的构造函数差不多的

Class es6新增的  extends constructor super

React 分两大派 ： 支持class 一派支持hooks

31.如何使用websocket实现前后端通信

第一步由于springboot很好地集成了websocket，所以先在pom.xml文件中引入依赖

第二步在前端界面使用websocket，也就是HTML文件中编写

第三步，一般我们是在controller层实现交互的，然而websocket的交互是在service层

32.JS数据类型

JavaScript共有八种数据类型：

分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

33.判断数据类型的方法

1. typeof   数组、对象、null都会被判断为object
2. instanceof    instanceof只能正确判断引用数据类型，而不能判断基本数据类型。`instanceof` 运算符可以用来测试一个对象在其原型链中是否存在一个构造函数的 `prototype` 属性。

1. constructor    有两个作用，一是判断数据的类型，二是对象实例通过 `constrcutor` 对象访问它的构造函数。

(4)Object.prototype.toString.call()

34.数组排序的方法

1. 利用Arrays带有的排序方法快速排序。
2. 冒泡法是运用遍历数组进行比较，通过不断的比较将最小值或者最大值一个一个的遍历出来。
3. 选择排序法是将数组的第一个数据作为最大或者最小的值，然后通过比较循环，输出有序的数组。

插入排序是选择一个数组中的数据，通过不断的插入比较最后进行排序。

35.图片懒加载预加载;

懒加载：指的是在长网页中延迟加载图像，是一种很好的优化网页性能的方式。用户滚动到他们之前，可视区域之外的图像是不会加载的。

预加载：就是将所需的资源提前加载到本地，这样当用户使用到该资源时，就会自动从缓存中取出。

懒加载和预加载的对比：两者都是提高页面性能的有效方法，懒加载是迟缓加载或者是不进行加载，预加载是提前加载。但是预加载会增加服务器压力。

36.==跟===的区别

==会进行类型的转换之后再判断两者是否相等，而===不会进行数据类型的转换，先判断两边的数据类型是否相等，如果数据类型相等的话才会进行接下来的判断，再进行等式两边值得判断，可以理解为只有等式两边是全等的时候结果才会是true，否则全为false。

37.i++跟++i的区别;

(1)i++ 是先赋值在再自加。

(2)++i是先自加在赋值。

38.性能优化;

就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。

Css

1.让一个子元素在页面相对于父元素进行上水平垂直居中有哪些方法

Flex display：flex； justify-content：center； align-item：center；

Position

Margin

TranslateX、Y 位移方法实现

2.flex布局有哪些属性，如何应用

flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

常用的属性:flex-direction,flex-wrap,justify-content，align-items，align-content，flex,align-self，Justify-content

盘点flex布局常见属性及适用场景_m0_67805754的博客-CSDN博客_flex布局适用于哪些场景

3.常见的页面布局方式有哪几种

Float   Position   Flex    Grid    Css多列布局 栅格布局  

用第三方ui框架的栅格系统布局

4.简单描述一下瀑布流布局

 图片 等高 等宽  Js实现瀑布流   Css3 多列布局    Flex布局

5.如何清除浮动

Clear：both;    ::after 伪元素的形式      Over-flow:hidden;

6.display：none和visibility：hidden opacity:0的区别

display：none 直接从dom树上干掉

visibility：hidden opacity:0 还会在页面 dom树上占位继承

7.怎么解决1px边框问题

 用0.5px    https://www.jianshu/p/7e63f5a32636

8.移动端常见的像素单位有哪些

px：绝对单位

%：相对单位，相对于父元素

vh：相对单位，相对于可视窗的高度

vw：相对单位，相对于可视窗的宽度

em：针对于父元素的font-size（谷歌浏览器字体默认大小为16px）

rem：针对于根元素html的font-size（移动端一般使用rem，方便计算）

9.position属性有哪些值

Static,  Relative,  Absolute ,  Fixed,  Sticky,  inherit

10.div水平垂直居中(已知宽高,未知)

已知宽高：(1)子绝父相与负边距实现     (2)子绝父相margin:auto实现       

(3)calc() 函数 实现

未知宽高：(1)子绝父相与transform实现  (2)flex布局实现     (3)grid布局实现     (4)table表格布局实现

11.盒模型;

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

12.如果要做优化,css提高性能的方法

1. 压缩css，减少文件体积；(2)使用link引入css文件；(3)合理设计CSS布局；(4)少用“*”选择器；(5)慎用浮动、定位等高性能属性；(6)尽量减少页面重排、重绘；

(7)属性值为0时，不加单位等等。 

13.选择器优先级

 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

14.Css3新特性

圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、文字或图像的变形处理、多栏布局、媒体查询。

15.Css兼容性方法

1、对样式进行初始化；2、添加浏览器私有属性；3、使用自动化插件

16.你常用的布局方式/为什么

flex布局:简单代码量少，控制元素在页面上的布局方向
rem布局:根据页面宽度和的页面的根元素来控制大小，移动端常用方式之一
响应式布局:根据页面的宽度来改变样式
固定布局:使用绝对定位就行对于相对定位来定位，从而达到有效的布局。

17.如何用css写一个三角形

首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。

18.localstorage和sessionstorage,cookie跟token的区别

服务端无状态：session是用于记录服务器和客户端会话状态的机制，在服务端保存状态，可以记录会话信息；token令牌是访问资源接口时所需的资源凭证，token使服务端无状态化，不存储会话信息。

安全性：token作为身份认证比session更加安全，能有效防止监听和攻击

跨域：session只提供一种简单的认证，不能共享给其他网站，而token可以提供认证和授权，可以供第三方调用API接口或共享用户数据。

Vue

1.组件间传参方式有哪些

 6种  javascript - vue组件间通信六种方式（完整版）_个人文章 - SegmentFault 思否

2.router-view是什么标签

App.vue根组件里面的  路由映射 单页面应用的核心

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

(1)v-if有更高的切换开销，v-show有更高的初始渲染开销。         

(2)v-show比v-if性能更高，因为v-show只能动态的改变样式，不需要增删DOM元素。      

(3)v-show不支持<template>语法

(4)v-if切换时候回实时的销毁和重建内部的事件、钩子函数等，v-show只会初始化渲染时候执行，再切换时候不会执行生命后期的过程。

4.操作dom需要在哪个生命周期

Mounted 这时候 dom树已经生成 并且挂载完毕了 mounted之前操作dom 你会获取不到 会报undefined

5.v-if和v-for可以同时用吗

当v-if与v-for 一起使用时，v-for 具有比 v-if 更高的优先级。这意味着 v-if 将分别重复运行于每个v-for循环中，即先运行v-for 的循环，然后在每一个v-for的循环中，再进行v-if的条件对比，会造成性能问题，影响速度。

6.为什么v-for需要key属性

key是具有唯一性的，能让算法更快的找到需要跟新的DOM，而不是一个个的去替换。还有一个就是防止复用。

7.插槽有哪些类型，怎么用

 插槽(Slot)：是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定、希望由用户指定的部分定义为插槽。

插槽的种类: 默认插槽   具名插槽 name   作用域插槽 slot标签可以动态传递数据

 什么情况下要用到哪一类插槽 每一类插槽长什么样子怎么用  v-slot

Vue中v-slot、插槽详解（看完这篇插槽对你来说很简单）_子时不睡的博客-CSDN博客_v-slot vue

8.vue中怎么选中一个dom元素

   Ref  this.$refs.name  ref就相当于 id 可以根据id获取到这个标签 document.getElementById(‘id’)   ref = “zz” this.$refs.zz

9.怎么修改一些ui组件库的内置样式

 Element ui dialog 直接写css 不生效

样式穿透 /deep/ .tag{

  Padding:10px;

}

10.为什么data必须是函数

   组件被很多地方引用着 函数 相当于一个闭包 然后保护住 不受其他组件的影响

   不写成函数 写成对象 data里面的数据就会被弄到这个特定的组件的vue实例上  不受全局的污染

11.vue2有什么优缺点

缺点 直接问的就是响应式的缺点

Vue 不能检测数组和对象的改动  页面不会更新 因为你在方法里面直接修改数组和对象的东西 会丧失响应性 页面是不会同步更新数据  我们的解决方案是手动触发页面的更新

解决方案： this.$set(原数组/对象 下标/key 改的元素/val)

第二个弊端就是： 异步更新队列的弊端  要配合this.$nextTick()方法去处理

场景: 啊珍要在方法里面去操作这个异步生成的页面dom元素的时候  阿珍的这些操作dom元素的逻辑代码要被包在this.$nextTick() 因为接口的数据还没完全响应给到前端 dom树还没有渲染完毕  当你做开发的时候 dom操作放在mounted里面还报错的时候哦 就要想起这个api

vue的优缺点：

1. vue优点，它属于轻量级框架、简单易学、支持双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快；

2、vue缺点，在实现多页应用时需要配置多入口，不够灵活，并且不支持IE8。

12.v-model做了什么 

v-model只不过是一个语法糖而已,真正的实现靠的还是：v-bind:绑定响应式数据，触发oninput 事件并传递数据

v-model的本质（简单说一下） - 登峰至极 - 博客园

13.vue中事件的修饰符有了解吗

vue中的事件修饰符 - 百度文库

14.单页面和多页面的区别及优缺点

单页面应用比较简单 开发比较快 通过app.vue 的router-view实现单页面的 最主要就是通过vue-router去实现页面在根组件访问和加载

单页面应用：

1.首页加载很慢 要优化： 减少http请求 雪碧图 图片懒加载 组件按需加载 路由懒加载 请求校验才发送请求

2.Seo搜索引擎不是很友好 你上线一个vue做的单页面应用 如果你不砸钱去做百度的快照 不做百度排名 你的单页面项目就会在十几二十页之后

     多页面使用vue的nuxt srr服务端渲染框架 把单页面弄成多页面

     Nuxt里面就没有router路由这个东西 全是用a标签 把这些搜索引擎搜索关键字埋在咱们的页面里面 html css

15.mvvm和mvc特征及区别

MVVM和MVC有什么区别-常见问题-PHP中文网

16.vue的双向数据绑定原理是

双向数据绑定的原理：采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

17.vuex有哪些属性，通常vuex在项目中如何使用

  State  this.$store.state.xxxx

  Getters  this.$store.getters.xxxx

  Mutations  this.$storemit(‘同步方法名‘,参数) 是唯一能够修改state里面的数据的地方

  Actions this.$store.dispatch(‘异步的方法名’,参数) 其实里面异步的方法也可以放axios请求

  Module

  ...mapState

18.可以直接修改state中某个对象的某个属性值吗

  不可以，mutations是唯一能够修改state里面的数据的地方

19.为什么调用异步用actions而不用mutation

在mutations里的异步请求成功后不能更新state，actions里的异步请求成功后可以commit调用mutations去更新state

20.mixins是什么，在什么场景下使用

Vue组件的mixins 一个mixin里面可以放公共的data的数据 和 methods里面一些方法

使用场景:当存在多个组件中的数据或者功能很相近时，就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

21.keep-alive的作用，应用场景，使用方法

  keep-alive:主要用于保存组件状态 或避免重新渲染

应用场景:点击商品列表进入详情页面 点击返回按钮 回到商品列表页

第一种方法:<keep-alive>   <router-view></router-view>   </keep-alive>

第二种方法在router路由中配置 在某个路由中加上一个meta属性

{path:'/index',component:()=>import('@/views/index'),meta:{keepAlice:true,//为true是缓存的意思}}

22.vue路由的钩子函数有哪些

(1)全局的钩子函数 beforeEach 和 afterEach ，beforeEach 有三个参数，to 代表要进入的路由对象，from 代表离开的路由对象。next 是一个必须要执行的函数。

(2)单个路由独享的钩子函数 beforeEnter ，它是在路由配置上直接进行定义的。

(3)组件内的导航钩子主要有这三种： beforeRouteEnter 、 beforeRouteUpdate 、

beforeRouteLeave 。它们是直接在路由组件内部直接进行定义的。

23.watch和computed区别

(1)computed表示的是计算属性，watch指的是监听属性，监听的值变化时执行回调函数

(2)computed会使用缓存，而watch不使用缓存，每次监听都执行回调

(3)computed需要return，而watch不一定要return

(4)computed从一开始就进行监听，而watch则不监听第一次加载，如果要watch监听第一次加载，需要配置immediate：true

(5)使用场景：computed适用于一个数据受多个数据影响时，watch适用于多个数据受一个数据影响时。

24.methods和computed的区别

 (1)computed是响应式的，methods并非响应式。

(2)调用方式不一样，computed定义的成员像属性一样访问，methods定义的成员必须以函数形式调用。

(3)computed是带缓存的，只有其引用的响应式属性发生改变时才会重新计算，而methods里的函数在每次调用时都要执行。

(4)computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读写属性，这点是methods中的成员做不到的

25.什么是虚拟dom树

vue中的虚拟DOM树 - javascript9527 - 博客园

26.使用ui组件库时，如何做form表单格式验证

Element ui form表单为例： 看文档..........

Validate方法 根据你定义好的rules验证规则 去校验

Element - The world's most popular Vue UI framework

27.$route和$router的区别

(1)$router是用来操作路由，$route是用来获取路由信息

(2)$router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）

(3)$route是一个跳转的路由对象（路由信息对象）,每一个路由都会有一个$route对象，是一个局部的对象。

28.$nextTick的应用场景

   nexttick使用场景和原理      

29.在项目中，怎么对axios做封装

 Promise封装axios 拦截器请求拦截携带token 响应拦截 配置一些baseURL timeout请求时间 Vue 中 axios 拦截器的封装_ 小鸟__老鹰的博客-CSDN博客

30.怎么封装一个vue组件（思想）

复用性:页面的结构。考虑传进去的数据结构 props。交互(父子之间的事件传递）

31.cli2与cli3有什么区别
vue-cli3是基于webpack4打造，vue-cli2是基于webpack3

vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录

vue-cli3提供了vue ui 命令，提供了可视化配置

vue-cli3移除了static文件夹，新增了public文件夹，并且将index.html移动到public中

使用vue-cli2初始化项目 vue init webpack 项目名，生成的目录

使用vue-cli3初始化项目 vue create 项目名，生成的目录.

32.vue是如何实现对页面上的双花括号进行数据绑定的？

Vue是如何实现数据双向绑定的？_要不要买菜啊的博客-CSDN博客_vue是如何实现双向绑定的

33.怎么通过权限实现动态路由

静态路由是不是我们直接在router文件夹里面index.js/router.js 我们前端开发的时候views文件夹里面所有的页面 要显示到浏览器上 是不是都要在路由字典里面去设置一下

动态路由 前端不需要在路由字典里面写死 你登录的时候会拿到一个动态路由的数组 [{url:’/role’},{url:’/product’},{url:’/xxx’} ]  前端要做的事情就是把这个动态路由数组登录的时候存到vuex里面 进去主页之后 在路由router.js里面 在路由字典下面通过一个方法 addRoute 把这个从后端拿到的动态路由的数组插入到路由字典里面去

Views里面根据动态路由的数组去建立对应的页面

后端会给你分配权限会根据你的token 知道你是什么权限 返回对应的动态路由数组给你 你能够在系统看到的页面能够访问到的页面

vue开发项目使用addRoute实现动态路由和动态菜单生成实现插件式UI框架开发_魔途一梦的博客-CSDN博客

        Vue-permission    

34.怎么理解vue中的单向数据流

单项数据流特指父子之间 父传子  Props 向下传递数据 props的数据不能更改

35.vue-router中的路由模式有哪些？有什么区别

 哈希 hash 带#号 的    History模式 不带# 号的

36.vue组件的scoped属性的作用

实现组件的私有化，不对全局造成样式污染

37.vue的首屏优化怎么做？有哪些方法

(1)缩小项目体积：通过webpack对项目体积进行压缩，开启gzip压缩文件

(2)减少请求次数/体积：通过精灵图来减少小图标的总请求数

(3)减少加载模块:通过按需加载、路由懒加载来优化。

38.vuex如何做持久化存储?

 存一份到vuex  页面一刷新 从localStorage里面拿出来再次赋值 就可以解决vuex刷新数据丢失问题 也就是所谓的持久化存储

Vuex数据状态持久化-vuex-persistedstate_袭烽的博客-CSDN博客_vuex-persistedstate

39.vue中事件绑定原理

    原生的就是通过js addEventListener实现的

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的

40.有遇到过数据改变，页面没有发生重绘的情况吗

Vue2响应式的弊端 不能够检测到对象或者数组对象的变化

解决方案：配合$set()方法 手动触发页面更新

41.如何自定义指令

自定义指令方法_qq_43077910的博客-CSDN博客_自定义指令

 Vue.directive

42.vue父子组件之间的生命周期执行顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

43.当刷新页面时，如何保持vuex中的值不丢失

LocalStorage  created 再从localStorage拿出来 再存一份到vuex

44.postcss是什么，怎么用:

 移动端适配

45.less和sass中，变量值是怎么声明的

Less:声明变量:@变量名:变量值   使用变量:@变量名

Sass:声明变量:$变量名:变量值

46.在git中，merge和rebase有什么区别

merge命令不会保留merge的分支的commit，rebase会保留所有的commit：

Git merge dev 切到合并到的那个分支 merge 去合并要合并的分支

47.loader和plugin的区别

Loader: 项目文件进行预处理

Plugin: 插件 分离js和html代码 预加载插件

48.vue3相较于上一个版本，有什么优化改进吗

Vue2响应式原理： object.defineProperty  给data里面的变量添加访问器属性 setget   Vue 不能检测数组和对象的变化  this.$set(对象 key newvalue)

Vue3响应式原理：proxy 代理 你用ref（）reactive（）声明的响应式数据 弄成一个proxy对象

49.webpack配置项都有哪些

① entry   入口文件 指定哪个文件为入口文件

②output   指令，打包后的文件应该放在哪里

③loader   一般是用来翻译文件的。

④plugins  插件，对js文件进行压缩，优化等等处理

⑤mode   用来定义，生产环境或者开发环境。

50.有没有看过或者写过webpack的插件

15个Webpack实用的插件_老谭TYH的博客-CSDN博客_常用的webpack插件

51.$nextTick是底层如何实现的

异步 如果是新版浏览器 promise 老版本的浏览器setImmediate,setTImeout

 放在$nextTick方法里面的逻辑代码（异步任务） 不会执行 会放到异步的事件队列里面等着 等页面的dom元素加载完 再第一时间执行异步事件队列的东西  

52.vue中的观察者模式是如何实现的

Vue中观察者模式的实现 | div

手写一个简版vue object.defineproperty

　观察者模式定义了对象间的一种一对多的组合关系，当一个对象的状态发生变化时，所有依赖于它的对象都得到通知并自动刷新。观察者模式必须包含两个角色：观察者和观察对象，两者之间存在“观察”的逻辑关联，当观察对象状态发生改变时，将通知相应的观察者以更新状态。

Watcher

搜索_哔哩哔哩-bilibili

53.vue中diff算法的原理

diff算法： 找不同 找差别 会根据v-for给的key 去对比 去查找发生变化的元素 进行局部更新渲染

路由跳转模式：hash & history

  关于hash和history的区别和使用_cc.ChenLy的博客-CSDN博客_hash和history的区别

路由跳转的方式：路由跳转的3种方式_zayzy的博客-CSDN博客_路由跳转

方式一：path路径跳转。传值可以使用params 传值和query传值(缺点:不能传引用数据类型-数组，对象)

方式二：命名式路由跳转。传值可以使用params和query传值(优点:可以传基本数据类型和数组，对象)

方式三：编程式路由跳转。传值可以用params 和query传值(优点:可以传基本数据类型和数组，对象)

55.路由守卫

1.作用：对路由器进行权限控制
2.分类：全局守卫、独享守卫、组件内守卫

56.页面第一次加载会触发哪些钩子函数

 beforeCreate, created, beforeMount, mounted

57.首屏加载速度慢,怎么解决;

(1)Vue-router懒加载

(2)在webpack打包的过程中，将多余文件去掉

(3)第三方库使用CDN引入

58.$nextTick的理解

nextTick是将回调函数延迟在下一次dom更新数据后调用，简单的理解就是:当数据更新了，当数据渲染后，自动执行该函数

59.组件通信方法

1. props：用于父=>子组件通信：

2.自定义事件：@on，@emit 可以实现子给父通信即vm.$emit( event, arg )

1. 全局事件总线eventBus：$bus 全能
2. pubsub-js：vue当中几乎不用（因为vue中有全局事件总线和这个第三方提供的库功能重复） 但全能

60.对vuex的理解/五个属性的作用

Vuex 是专门为 Vue.js 设计的状态管理库。

 vuex的五个属性是：1、state属性，用来存储变量；2、getters属性，相当于state的计算属性；3、mutations属性，用于提交更新数据；4、actions属性；和mutations属性大致相同；5、modules属性，用于模块化vuex。

61.mutation跟action的区别;

action中处理异步，mutation不可以
mutation做原子操作
action可以整合多个mutation的集合

mutation 是同步更新数据 $watch 严格模式下会报错
action 异步操作，可以获取数据后调佣 mutation 提交最终数据

62.vue3跟vue2的区别

双向数据绑定原理发生了改变，生命周期，父子传参不同，setup()函数特性，建立数据data

vue2和vue3区别_猪也是粉嘟嘟的的博客-CSDN博客_vue2和vue3区别

64.created和mounted的区别

created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成识图。
mounted：在模板渲染成html后调用，通常初始化页面完成后，再对html的dom节点进行一些需要的操作。

65.为什么 Vuex 的 mutation 中不能做异步操作？

mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

其他

1.前端怎么做性能优化，方法有哪些

（1）减少http请求数：合并图片，去掉不必要的请求，充分利用缓存。

（2）图片优化：使用PNG格式的图片，图片的延迟加载，也叫做懒加载。

     (3)使用CDN:解决网络拥挤的状况，提高用户访问网站的响应速度。

（4）样式表和JS文件的优化:把css样式表放到文件的头部。js文件，一般我们把他放到页面的尾部。

（5）开启GZIP:压缩使用Internet传输的所有文本资源.

2.怎么让网站在搜索引擎的排行靠前（seo优化）

(1)把单页面弄成多页面(2)不用路由,用a跳转 window.location.href (3)搜索引擎的竞价

3.在实际开发中遇到的问题?

页面布局 js逻辑处理 接接口 根据状态码定位问题 组件使用

4.有遇到过浏览器/移动端兼容性问题吗

Css加浏览器前缀 css hack js对象 js方法api 新老版本的浏览器写法不一样

5.从浏览器输入url直到页面渲染，期间有哪些步骤

域名解析、建立连接、发送请求、响应数据、关闭连接。

从在浏览器中输入URL到页面渲染出来的完整过程是怎样的？_weixin_34235457的博客-CSDN博客

https://wwwblogs/kongxy/p/4615226.html

6.什么是页面的回流与重绘

    回流：元素的宽高、布局、显示、隐藏或元素内部文字结结构发生改变时，导致元素内部、周围甚至整个页面的重新渲染。

重绘：元素的结构未发生改变，只是元素的外观样式发生改变比如背景颜色、内部文字颜色、边框颜色等。

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

重绘： 只是一些样式的改变  外观的改变

回流：页面DOM树 结构的改变