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 实例从创建到销毁的过程就是生命周期。
常见的四大阶段八大钩子函数
- 创建前后
beforeCreate / created
- 渲染前后
beforeMount / mounted
- 更新前后
beforeUpdate / updated
- 销毁前后
beforeDestroy / destroyed
另外三个生命周期函数不常用
keep-alive 主要用于保留组件状态或避免重新渲染。
activated只有在keep-alive 组件激活时调用。
deactivated只有在keep-alive 组件停用时调用。
- 生命周期的加载：
在加载一个组件后：
如果没有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算法进行了优化
- 体积更小
按需引入，能配合Webpack支持tree shaking
删除EventBus filter
对ts更加支持
Compositon API (组合API）
组合API，把同一功能的数据和处理数据的业务逻辑组合在一起
Vue2对于小型项目一目了然，很适合上手
Composition API 对于大型的项目更加方便维护和复用
5.新增加了一些特性(Fragment,Suspense,Teleport )
11.常见的继承有哪些？
- 原型链继承
- 原型式继承
- 借用构造函数继承
- 组合继承
- Class类实现继承
- 寄生式继承
12.后台管理系统中的权限管理是怎么实现的？
使用RBAC权限管理
主体操作是给角色分配权限，给人员分配角色
1.页面权限：
当用户通过验证登录验证后，服务端会返回一个token，拿到token后，将其存在cookie中，根据token去拉取用户的信息（如用户的权限）
动态根据用户的权限计算出其对应的权限路由，可使用includes，并通过router.addRoutes动态挂载这些路由
2.按钮权限
使用全局的自定义指令，无则删除
13、es6有哪些新特性？
2015年推出
- 新增了let和const，它们具有块级作用域，不存在变量提升的问题
- 新增了箭头函数，简化定义函数写法
- 新增了promise解决回调地狱问题
- 新增calss类的概念，类似于对象
14.v-for 循环为什么一定要绑定key ?
绑定了key值vue就清楚你修改的是哪个dom，直接对该dom进行修改即可，大大提高了效率
15.组件中的data为什么要定义成一个函数而不是一个对象？
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他
16.常见的盒子垂直居中的方法有哪些请举例3种？
- 子绝父相定位，手动设置magin为宽高的一半
- 子绝父相，使用translate
- Flex布局
17.平时都是用什么实现跨域的？
- 配置代理服务器
通过配置vue.config.js中的devServer的proxy选项来进行处理
2.CORS：
跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；
18.cookie 、localstorage 、 sessionstrorage 之间有什么区别？
- 和服务器交互中
Cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
- 存储大小
cookie 数据根据不同浏览器限制，大小一般不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M
- 有效时间
localStorage存储持久数据，浏览器关闭数据不丢失
sessionStorage浏览器窗口关闭后数据自动删除
ookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关
19.this 的指向有哪些？
- 普通函数中this指向window
- 构造函数中，this指向构造函数new出来的实例对象
- 箭头函数没有this，指向取决外部环境
- 定时器中的this指向window
20.什么是递归，递归有哪些优点或缺点？
如果一个函数在内部可以调用其本身，这个函数就是递归函数
简单点来讲：函数内部自己调用自己
优点：
结构清晰，可读性强
缺点：
效率低，调用栈可能会溢出
21.谈谈你平时都用了哪些方法进行性能优化？
- 打包压缩上线代码
- 减少http请求次数
- 使用懒加载，动态渲染组件，cdn加载包
22.vue实例是挂载到那个标签上的？
Vue实例挂载在body标签上，vue中获取不到body，只能通过原生方式
23.什么是深拷贝、什么是浅拷贝？
浅拷贝:
就是创建一个新的对象，这个对象有原始对象属性值
如果属性是基本类型则拷贝基本类型的值，引用类型则拷贝的是内存地址
深拷贝：
将一个对象从内存中完整拷贝一份出来，在堆内存中开辟一个新的区域存放对象
区别：
浅拷贝中有一个对象改变了地址，会对另外一个影响
深拷贝中不会相互影响
24.js的执行机制是怎么样的？
js是一个单线程，异步，非阻塞I/O模型，event loop事件循环的执行机制
其中事件循环为，同步先于异步执行，将满足条件的异步任务从事件对象中依次取出，放到主线的执行栈中依次执行
25.请写至少三种数组去重的方法？（原生js）
- 利用filter加上indexof
- Set去重
- 双重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.清除浮动的方法有哪些？
为什么要清除浮动，因为浮动的盒子脱离了标准流，如果父盒子没有设置高度，下面盒子会撑上来
- 父元素添加overflow：hidden
- 单双伪元素
- 额外标签法 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.将共享的数据放在store中
2.Mutation改变state中的数据，但是只能进行同步的操作
3.Action进行异步操作，提交到mutation中，通过mutation改变store中的数据
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的包
- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
3.忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no">44.post和get 请求有哪些区别？
- 传参的方式不同：
Get参数在url后面拼接（请求行）
Post参数在请求体中发送
- 数据大小不同
Get有大小的限制，一般2-5mb
post没有大小限制（文件上传）
- 传输的速度不同
Get传输的速度快
Post传输的速度慢
- 安全性不同
Get安全性低
Post安全性高
45.什么是同源策略？
所谓同源策略就是浏览器的一种安全机制，来限制不同源的网站不能通信
同源就是域名，协议，端口都是一致的
46.http状态码分别代表什么意思？
1开头表示http请求已经接收，继续处理请求
2开头表示请求已经处理完成
3开头表示把请求访问的url重定向到其他目录
4开头表示客户端出现错误
- 表示服务端出现错误
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的数据类型有哪些？
- 基础数据类型：直接存储在栈中的数据
String number boolean null undefined symbol
- 复杂数据类型：真实的数据存放在堆内存当中
Array object function
50.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- 浏览器查找域名对应的ip地址，DNS查询
- 浏览器向服务器发送http请求（TCP三次握手)
- TCP/IP连接建立，浏览器发送http的get请求，服务器返回一个http响应
- 浏览器进行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修改一次可以一直使用
有不足的地方欢迎指正，喜欢的话给个赞吧！！！
版权归原作者 前端小谢 所有， 如有侵权，请联系我们删除。