1.什么是mvvm  、 mvc 模型？

Mvvm：

Model 指的是后端传递过来的数据

View 指的是所看到的页面

ViewModel 指的是连接模型和视图

MVVM的目标和思想MVP类似它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据

Mvc：

MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的智能单一性，方便程序的开发

2.vue双向数据绑定的原理？

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

3.谈谈vue的生命周期？

1.介绍生命周期的类别：

vue 实例从创建到销毁的过程就是生命周期。

常见的四大阶段八大钩子函数

1. 创建前后

beforeCreate / created

1. 渲染前后

beforeMount / mounted

1. 更新前后

beforeUpdate / updated

1. 销毁前后

beforeDestroy / destroyed

另外三个生命周期函数不常用

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

activated只有在keep-alive 组件激活时调用。

deactivated只有在keep-alive 组件停用时调用。

1. 生命周期的加载：

在加载一个组件后：

如果没有keep-alive，则经历前面四个阶段即beforeCreate到mounted

有keep-alive，分第一次和第二次，第一次加载五个阶段即前面四个加上activated

第二次则只有activated

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

V-if是“真正”的条件渲染，操作的实际上是dom元素的创建或者销毁

V-show，不管初始条件，元素总被渲染，基于css切换，操作的是display里面的none或者block属性

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

因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用v-if

5.async 与await  是什么？它有哪些作用？

async与 await 可以理解为generate的语法糖，它的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise 中的then

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到await 就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

6.常用的数组方法有哪些？

增删操作

增：

Unshift( ) 将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)

Push ( ) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

删：

Shift ( ) 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度

Pop ( ) 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度

Splice ( ) 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组

其他常用操作

IndexOf ( ) 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

Findindex ( ) 数组中满足提供的测试函数的第一个元素的索引。否则返回-1

Find ( ) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

Concat ( ) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

Join ( ) 将数组所有元素拼接成一个字符串并且返回这个字符串

Reverse ( ) 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组

Sort ( ) 对数组的元素进行排序，并返回数组

Includes ( ) 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否

则返回false

Reduce ( ) 可以进行累加，求最大最小值

Filter ( ) 数组的筛选

ForEach ( ) 数组循环

Every ( ) 用于判断全部满足才可，一假则假

Some ( ) 用于判断只需满足一个即可，一真则真

7.数组有哪几种循环方式？分别有什么作用？

Every ( ) 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

Some ( ) 测试一个数组内的至少有一个是否都能通过某个指定函数的测试。它返回一个布尔值

ForEach ( ) 对数组的每个元素执行一次提供的函数

Filter ( ) 创建一个新数组，通过提供的函数测试所有元素

8.常用的字符串方法有哪些？

Concat ( ) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

Includes ( ) 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否

则返回false

IndexOf ( ) 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

Match ( ) 方法检索返回一个字符串匹配正则表达式的的结果

Replace ( ) 进行替换

Slice ( ) 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串

Split ( ) 分割符，对数组进行分割

Substr ( ) 返回一个字符串中从指定位置开始到指定字符数的字符

9.什么是原型链？

每一个实例对象上面都有proto属性，指向的构造函数的原型对象

构造函数的原型对象也是一个对象，也有proto属性，这样一层层往上面找的过程就形成了原型链

10.说一下你对Vue3的理解

1.性能更高

响应式的原理换成了Proxy

VNode Diff算法进行了优化

1. 体积更小

按需引入，能配合Webpack支持tree shaking

删除EventBus  filter

1. 对ts更加支持

1. Compositon API (组合API）

组合API，把同一功能的数据和处理数据的业务逻辑组合在一起

Vue2对于小型项目一目了然，很适合上手

Composition API 对于大型的项目更加方便维护和复用

5.新增加了一些特性(Fragment,Suspense,Teleport )

11.常见的继承有哪些？

1. 原型链继承
2. 原型式继承
3. 借用构造函数继承
4. 组合继承
5. Class类实现继承
6. 寄生式继承

12.后台管理系统中的权限管理是怎么实现的？

使用RBAC权限管理

主体操作是给角色分配权限，给人员分配角色

1.页面权限：

当用户通过验证登录验证后，服务端会返回一个token，拿到token后，将其存在cookie中，根据token去拉取用户的信息（如用户的权限）

动态根据用户的权限计算出其对应的权限路由，可使用includes，并通过router.addRoutes动态挂载这些路由

2.按钮权限

使用全局的自定义指令，无则删除

 13、es6有哪些新特性？

2015年推出

1. 新增了let和const，它们具有块级作用域，不存在变量提升的问题
2. 新增了箭头函数，简化定义函数写法
3. 新增了promise解决回调地狱问题
4. 新增calss类的概念，类似于对象

14.v-for 循环为什么一定要绑定key ?

绑定了key值vue就清楚你修改的是哪个dom，直接对该dom进行修改即可，大大提高了效率

15.组件中的data为什么要定义成一个函数而不是一个对象？

每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

16.常见的盒子垂直居中的方法有哪些请举例3种？

1. 子绝父相定位，手动设置magin为宽高的一半
2. 子绝父相，使用translate
3. Flex布局

17.平时都是用什么实现跨域的？

1. 配置代理服务器

通过配置vue.config.js中的devServer的proxy选项来进行处理

2.CORS：

跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；

18.cookie 、localstorage 、 sessionstrorage 之间有什么区别？

1. 和服务器交互中

Cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）

sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存

1. 存储大小

cookie 数据根据不同浏览器限制，大小一般不能超过 4k

sessionStorage 和 localStorage  虽然也有存储大小的限制，但比cookie大得多，可以达到5M

1. 有效时间

localStorage存储持久数据，浏览器关闭数据不丢失

sessionStorage浏览器窗口关闭后数据自动删除

ookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关

19.this 的指向有哪些？

1. 普通函数中this指向window
2. 构造函数中，this指向构造函数new出来的实例对象
3. 箭头函数没有this，指向取决外部环境
4. 定时器中的this指向window

20.什么是递归，递归有哪些优点或缺点？

如果一个函数在内部可以调用其本身，这个函数就是递归函数

简单点来讲：函数内部自己调用自己

优点：

结构清晰，可读性强

缺点：

效率低，调用栈可能会溢出

21.谈谈你平时都用了哪些方法进行性能优化？

1. 打包压缩上线代码
2. 减少http请求次数
3. 使用懒加载，动态渲染组件，cdn加载包

22.vue实例是挂载到那个标签上的？

Vue实例挂载在body标签上，vue中获取不到body，只能通过原生方式

23.什么是深拷贝、什么是浅拷贝？

浅拷贝:

就是创建一个新的对象，这个对象有原始对象属性值

如果属性是基本类型则拷贝基本类型的值，引用类型则拷贝的是内存地址

深拷贝：

将一个对象从内存中完整拷贝一份出来，在堆内存中开辟一个新的区域存放对象

区别：

浅拷贝中有一个对象改变了地址，会对另外一个影响

深拷贝中不会相互影响

24.js的执行机制是怎么样的？

js是一个单线程，异步，非阻塞I/O模型，event loop事件循环的执行机制

其中事件循环为，同步先于异步执行，将满足条件的异步任务从事件对象中依次取出，放到主线的执行栈中依次执行

25.请写至少三种数组去重的方法？（原生js）

1. 利用filter加上indexof
2. Set去重
3. 双重for循环，然后splice去重请写出至少两种常见的数组排序的方法（原生js）

26.知道lodash吗？它有哪些常见的API  ？

lodash是一个模块化，高性能的js工具库

_.cloneDeep 深度拷贝

_.reject 根据条件去除某个元素

_.drop(array , [ n=1 } )作用，将array中的前n个元素去掉，返回剩余部分

27.http的请求方式有哪些？

Get  post  put  delete

28.平时都是用那些工具进行打包的？babel是什么？

Webpack，模块化打包工具，有对应的模块加载器，会分析模块间的依赖关系，最后生成了优化且合并后的静态资源

Babel帮我们转换一些当前浏览器不支持的语法，将语法转换为低版本的语法

29.谈谈set 、 map 是什么？

都是es6提供的一种新的数据结构

Set类似于数组，但是成员的值都是唯一的

Map类似于对象，也是键值对的集合，各种类型的值都可以当做键，map结构提供了只于值的对应

30.清除浮动的方法有哪些？

为什么要清除浮动，因为浮动的盒子脱离了标准流，如果父盒子没有设置高度，下面盒子会撑上来

1. 父元素添加overflow：hidden
2. 单双伪元素
3. 额外标签法 clear：both

31.常见的布局方法有哪些？他们的优缺点是什么？

浮动：

兼容性好

脱离标准文档流，需要清除浮动

绝对定位：

快

子元素脱离标准文档流，实用性差

Flex布局

移动端推介使用

网格布局

栅格系统布局

 32、图片懒加载是怎么实现的？

延迟加载，指的是在长网页中延迟加载图像

懒加载的原理：

首先将页面上图片的src属性设置为空字符串，真实路径设置在data original属性中，页面滚动的时候监听scroll事件，如果懒加载图片进入到了可视区域，则将data original上的值赋值给图片的src，实现懒加载

33.vue中computed 和watch 的区别是什么？

Computed用于监控自己定义的变量，该变量不在data里面声明，在computed里面定义

Watch主要监控vue实例的变化，该变量必须在data里面声明

计算属性不能执行异步任务，必须执行同步任务，遇到异步任务则需要交给侦听属性

34.vue中是怎么实现父向子、子向父、兄弟之间的传值的？

父向子传值主要是通过props属性来传值

子向父传值主要是通过$emit

兄弟之间的传值是通过事件总线evenBus

35.什么vuex ,谈谈你对它的理解？

Vuex就是将各个组件公用的数据放到了一个仓库里面统一进行管理，是一个为vue.js设计的数据仓库

Vuex解决了各个组件之间传值的复杂和混乱的问题

1.将共享的数据放在state中

2.Mutation改变state中的数据，但是只能进行同步的操作

3.Action进行异步操作，提交到mutation中，通过mutation改变state中的数据

4.Module模块化管理

5.需要获取或者格式化数据使用getters

36.数据类型的判断有哪些方法？他们的优缺点及区别是什么

1.typeof

使用简单，但只能检测出基本类型

2.instanceof

能检测出引用类型，但是不能检测出基本类型，且不能跨iframe

3.constructor

基本能检测所有的类型（处理了null和undefined），但是constructor易被修改，也不能跨iframe

4.Object.prototype.toString.call

检测出所有的类型，但是在IE6下面，undefined和null均为Object

37.知道symbol 吗？

在ES6中引入新的原始数据类型Symbol。表示独一无二的值

38.请描述一下ES6中的class类?

Es6中的class可以将它看成是es5中构造函数的语法糖，它简化了构造函数的写法

Class的实例必须通过new关键字

在类的内部可以使用get和set关键字

39.谈谈盒子模型？

标准盒子模型：

Width和height指的是内容区域的宽度和高度，增加内边距，边框，外边距不会影响内容区域的尺寸

IE盒子模型：

Width和height指的是内容区域 +bording和padding的宽度和高度

40.promise是什么？它有哪些作用？

Promise是异步编程的一种解决方案

能够解决回调地狱的问题，也就是异步深层嵌套问题

是一个对象

New来创建一个promise ，promise的构造函数接收一个参数，传入两个参数resolve ，reject分别表示异步操作执行成功后和失败后的回调函数

41.vue-cli  2.0和3.0 有什么区别？

3.0把配置webpack的文件隐藏了，如果需要配置它则需要创建一个vue.config.js文件

42.箭头函数有哪些特征，请简单描述一下它？

箭头函数没有自己的this

箭头函数不能new，会报错

箭头函数没有prototype

43.移动端有哪些常见的问题，都是怎么解决的？

1.点击事件300MS延迟问题 解决方案：下载fastclick的包

2. H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

3.忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no">

44.post和get 请求有哪些区别？

1. 传参的方式不同：

Get参数在url后面拼接（请求行）

Post参数在请求体中发送

1. 数据大小不同

Get有大小的限制，一般2-5mb

post没有大小限制（文件上传）

1. 传输的速度不同

Get传输的速度快

Post传输的速度慢

1. 安全性不同

Get安全性低

Post安全性高

45.什么是同源策略？

所谓同源策略就是浏览器的一种安全机制，来限制不同源的网站不能通信

同源就是域名，协议，端口都是一致的

46.http状态码分别代表什么意思？

1开头表示http请求已经接收，继续处理请求

2开头表示请求已经处理完成

3开头表示把请求访问的url重定向到其他目录

4开头表示客户端出现错误

1. 表示服务端出现错误

47.BFC是什么？

Bfc（块级格式化上下文），一个创建了新的bfc的盒子是独立布局的，盒子内元素与的布局不会影响盒子外面的元素

48.token是什么？（加密）

1.Token可以称为令牌，一般由uid  time  sign 加固定参数组成

uid: 用户唯一身份标识

time: 当前时间的时间戳

sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查

2.token在客户端一般存放于localStorage，cookie，或sessionStorage中。在服务器一般存于数据库中

3.客户端登陆传递信息给服务端，服务端收到后把用户信息加密（token）传给客户端，客户端将 token存放于localStroage等容器中。客户端每次访问都传递token，服务端解密token，就知道这个用户是谁了

49.js的数据类型有哪些？

1. 基础数据类型：直接存储在栈中的数据

String  number  boolean  null  undefined  symbol

1. 复杂数据类型：真实的数据存放在堆内存当中

Array  object  function

50.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1. 浏览器查找域名对应的ip地址，DNS查询
2. 浏览器向服务器发送http请求（TCP三次握手)
3. TCP/IP连接建立，浏览器发送http的get请求，服务器返回一个http响应
4. 浏览器进行dom树构建，获取html资源，显示完成页面

51.谈谈构造对象，原型对象，实例对象

构造对象通过prototype指向原型对象，解决资源浪费和变量污染

原型对象通过constructort指向构造对象， 让实例对象知道自己被哪个构造函数创建

实例对象通过proto指向原型对象，让实例对象访问原型中的成员

在这三个之中可以将实例对象那比喻成儿子，原型对象是实例的妈妈，构造函数是实例对象的父亲

所有对象的原型链最终都是指向object.prototype   万物皆对象

而对象object.prototype最终指向null   万物皆空

52.CSRF 和 XSS 的区别

CSRF需要用户先登录网站A，获取到cookie

XSS不需要登录

原理上：

CSRF是利用网站A本身的漏洞，去请求网站A的api

XSS是向网站A注入js代码，执行js代码，篡改网站A的内容

 53.cookie和session 的区别

Cookie和Session都用于存储信息。它们最主要的区别在于Cookie存储在客户端计算机上,而Session则存储在服务器上

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

54.什么是闭包？闭包有哪些优缺点？

闭包是函数加上上下文的引用 ，或者可以说是闭包是一个访问其他函数内部变量的一个函数

闭包的作用？闭包解决变量污染

55.call、apply、bind三者的异同

相同点：都可以改变this指向

不同点：

1.传参的方式不同

Call是逐一传参，apply传的是数组或者伪数组

2.执行机制不同

Call和apply是立即执行，bind不会立即执行

Call和apply用一次修改一次

Bind修改一次可以一直使用

有不足的地方欢迎指正，喜欢的话给个赞吧！！！