什么是mvvm 、 mvc 模型？
Mvvm：
Model 指的是后端传递过来的数据
View 指的是所看到的页面
ViewModel 指的是连接模型和视图
MVVM的目标和思想MVP类似它是一种双向数据绑定的模式，用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据
Mvc：
MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处是：保证了模块的单一性，方便程序的开发
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
async 与await 是什么？它有哪些作用？
async与 await 可以理解为generate(杰len瑞)的语法糖，它的作用就是 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。它可以很好的替代promise中的then
async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
常用的数组方法有哪些？
增删操作
增：
Unshift( ) 将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)
Push ( ) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
删：
Shift ( ) 从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度
Pop ( ) 从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度
Splice ( ) 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组
其他常用操作
IndexOf ( ) 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
Findindex ( ) 数组中满足提供的测试函数的第一个元素的索引。否则返回-1
Find ( ) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined
Concat ( ) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
Join ( ) 将数组所有元素拼接成一个字符串并且返回这个字符串
Reverse ( ) 将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组
Sort ( ) 对数组的元素进行排序，并返回数组
Includes ( ) 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否
则返回false
Reduce ( ) 可以进行累加，求最大最小值
Filter ( ) 数组的筛选
ForEach ( ) 数组循环
Every ( ) 用于判断全部满足才可，一假则假
Some ( ) 用于判断只需满足一个即可，一真则真
数组有哪几种循环方式？分别有什么作用？
Every ( ) 测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值
Some ( ) 测试一个数组内的至少有一个是否都能通过某个指定函数的测试。它返回一个布尔值
ForEach ( ) 对数组的每个元素执行一次提供的函数
Filter ( ) 创建一个新数组，通过提供的函数测试所有元素
常用的字符串方法有哪些？
Concat ( ) 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
Includes ( ) 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否
则返回false
IndexOf ( ) 在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1
Match ( ) 方法检索返回一个字符串匹配正则表达式的的结果
Replace ( ) 进行替换
Slice ( ) 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串
Split ( ) 分割符，对数组进行分割
Substr ( ) 返回一个字符串中从指定位置开始到指定字符数的字符
什么是原型链？
每一个实例对象上面都有proto属性，指向的构造函数的原型对象
构造函数的原型对象也是一个对象，也有proto属性，这样一层层往上面找的过程就形成了原型链
说一下你对Vue3的理解
1.性能更高
响应式的原理换成了Proxy
VNode Diff算法进行了优化
- 体积更小
按需引入，能配合Webpack支持tree shaking
删除EventBus filter
- 对ts更加支持
- Compositon API (组合API）
组合API，把同一功能的数据和处理数据的业务逻辑组合在一起
Vue2对于小型项目一目了然，很适合上手
Composition API 对于大型的项目更加方便维护和复用
5.新增加了一些特性(Fragment,Suspense,Teleport )
什么是闭包？手写一个闭包函数？ 闭包有哪些优缺点？
闭包是函数加上上下文的引用 ，或者可以说是闭包是一个访问其他函数内部变量的一个函数
闭包的作用？闭包解决变量污染
11.常见的继承有哪些？
- 原型链继承
- 原型式继承
- 借用构造函数继承
- 组合继承
- Class类实现继承
- 寄生式继承
es6有哪些新特性？
2015年推出
- 新增了let和const，它们具有块级作用域，不存在变量提升的问题
- 新增了箭头函数，简化定义函数写法
- 新增了promise解决回调地狱问题
- 新增calss类的概念，类似于对象
v-for 循环为什么一定要绑定key ?
绑定了key值vue就清楚你修改的是哪个dom，直接对该dom进行修改即可，大大提高了效率
组件中的data为什么要定义成一个函数而不是一个对象？
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他
常见的盒子垂直居中的方法有哪些请举例3种？
- 子绝父相定位，手动设置magin为宽高的一半
- 子绝父相，使用translate
- Flex布局
- 子绝父相,
- 知道自身宽高可以用 margin-top / margin-left 负值，更建议使用
transform: translate(-50%, -50%);，它能做到在不知道自身尺寸的情况下也能位移自身的一半。
平时都是用什么实现跨域的？
- 配置代理服务器
通过配置vue.config.js中的devServer的proxy选项来进行处理
2.CORS：跨域资源共享（CORS）是一种机制；当一个资源访问到另外一个资源(这个资源放在不同的域名或者不同的协议或者端口)，资源就会发起一个跨域的HTTP请求需要浏览器和服务器同时支持；
cookie 、localstorage 、sessionstrorage 之间有什么区别？
- 和服务器交互中
Cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存
- 存储大小
cookie 数据根据不同浏览器限制，大小一般不能超过 4k
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M
- 有效时间
localStorage存储持久数据，浏览器关闭数据不丢失
sessionStorage浏览器窗口关闭后数据自动删除
cookie 设置的cookie过期时间之前一直有效，与浏览器是否关闭无关
this 的指向有哪些？
- 普通函数中this指向window
- 构造函数中，this指向构造函数new出来的实例对象
- 箭头函数没有this，指向取决外部环境
- 定时器中的this指向window
什么是递归，递归有哪些优点或缺点？
如果一个函数在内部可以调用其本身，这个函数就是递归函数
简单点来讲：函数内部自己调用自己
优点：结构清晰，可读性强
缺点：效率低，调用栈可能会溢出
谈谈你平时都用了哪些方法进行性能优化？
- 打包压缩上线代码
- 减少http请求次数
- 使用懒加载，动态渲染组件，cdn加载包
vue实例是挂载到那个标签上的？
Vue实例挂载在body标签上，vue中获取不到body，只能通过原生方式
1.4-call apply bind区别
call和apply和bind区别
*call和apply用一次，改一次
*bind修改一次，终生有效
相同点 : 作用一致，修改函数this指向
不同点 :
传参方式不同 : call是按照顺序传参, apply是数组/伪数组传参
执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数
1.8-浅拷贝与深拷贝
//浅拷贝： 拷贝地址,修改拷贝后的数据，原数据也会修改
//深拷贝 : 拷贝数据,
(1)先把js对象 -> JSON字符串 (JSON会自动帮你深拷贝)
// let jsonStr = JSON.stringify( obj )
//(2)再把 JSON字符串 -> js对象
// let newObj = JSON.parse( jsonStr )
什么是深拷贝、什么是浅拷贝？
浅拷贝:
就是创建一个新的对象，这个对象有原始对象属性值
如果属性是基本类型则拷贝基本类型的值，引用类型则拷贝的是内存地址
深拷贝：
将一个对象从内存中完整拷贝一份出来，在堆内存中开辟一个新的区域存放对象
区别：
浅拷贝中有一个对象改变了地址，会对另外一个影响
深拷贝中不会相互影响
js的执行机制是怎么样的？
js是一个单线程，异步，非阻塞I/O模型，event loop事件循环的执行机制
其中事件循环为，同步先于异步执行，将满足条件的异步任务从事件对象中依次取出，放到主线的执行栈中依次执行
请写至少三种数组去重的方法？（原生js）
- 利用filter加上indexof
- Set去重
- 双重for循环，然后splice去重请写出至少两种常见的数组排序的方法（原生js）
- 快速排序使用concat
- 插入排序使用sort
- 冒泡排序
知道lodash吗？它有哪些常见的API ？
lodash是一个模块化，高性能的js工具库
_.cloneDeep 深度拷贝
_.reject 根据条件去除某个元素
_.drop(array , [ n=1 } )作用，将array中的前n个元素去掉，返回剩余部分
http的请求方式有哪些？
Get post put delete
平时都是用那些工具进行打包的？babel是什么？
Webpack，模块化打包工具，有对应的模块加载器，会分析模块间的依赖关系，最后生成了优化且合并后的静态资源
Babel帮我们转换一些当前浏览器不支持的语法，将语法转换为低版本的语法
谈谈set 、 map 是什么？
都是es6提供的一种新的数据结构
Set类似于数组，但是成员的值都是唯一的
Map类似于对象，也是键值对的集合，各种类型的值都可以当做键，map结构提供了只于值的对应
清除浮动的方法有哪些？
为什么要清除浮动，因为浮动的盒子脱离了标准流，如果父盒子没有设置高度，下面盒子会撑上来
- 父元素添加overflow：hidden
- 单双伪元素
- 额外标签法 clear：both
常见的布局方法有哪些？他们的优缺点是什么？
浮动：
兼容性好
脱离标准文档流，需要清除浮动
绝对定位：
快
子元素脱离标准文档流，实用性差
Flex布局
移动端推荐使用
网格布局
栅格系统布局
vue中computed 和watch 的区别是什么？
Computed用于监控自己定义的变量，该变量不在data里面声明，在computed里面定义
Watch主要监控vue实例的变化，该变量必须在data里面声明
计算属性不能执行异步任务，必须执行同步任务，遇到异步任务则需要交给侦听属性
vue中是怎么实现父向子、子向父、兄弟之间的传值的？
父向子传值主要是通过props属性来传值
子向父传值主要是通过$emit
兄弟之间的传值是通过事件总线evenBus
什么是vuex ,谈谈你对它的理解？
Vuex就是将各个组件公用的数据放到了一个仓库里面统一进行管理，是一个为vue.js设计的数据仓库
Vuex解决了各个组件之间传值的复杂和混乱的问题
1.将共享的数据放在state中
2.Mutation改变state中的数据，但是只能进行同步的操作
3.Action进行异步操作，提交到mutation中，通过mutation改变store中的数据
4.Module模块化管理
5.需要获取或者格式化数据使用getters
数据类型的判断有哪些方法？他们的优缺点及区别是什么？
知道symbol 吗？
在ES6中引入新的原始数据类型Symbol。表示独一无二的值
请描述一下ES6中的class类?
Es6中的class可以将它看成是es5中构造函数的语法糖，它简化了构造函数的写法
Class的实例必须通过new关键字
在类的内部可以使用get和set关键字
谈谈盒子模型？
标准盒子模型：
Width和height指的是内容区域的宽度和高度，增加内边距，边框，外边距不会影响内容区域的尺寸
IE盒子模型：
Width和height指的是内容区域 +bording和padding的宽度和高度
promise是什么？它有哪些作用？
Promise是异步编程的一种解决方案
能够解决回调地狱的问题，也就是异步深层嵌套问题
是一个对象
New来创建一个promise ，promise的构造函数接收一个参数，传入两个参数resolve ，reject分别表示异步操作执行成功后和失败后的回调函数
vue-cli 2.0和3.0 有什么区别？
3.0把配置webpack的文件隐藏了，如果需要配置它则需要创建一个vue.config.js文件
箭头函数有哪些特征，请简单描述一下它？
箭头函数没有自己的this
箭头函数不能new，会报错
箭头函数没有prototype
移动端有哪些常见的问题，都是怎么解决的？
1.点击事件300MS延迟问题 解决方案：下载fastclick的包
- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
3.忽略Android平台中对邮箱地址的识别
post和get 请求有哪些区别？
- 传参的方式不同：
Get参数在url后面拼接（请求行）
Post参数在请求体中发送
- 数据大小不同
Get有大小的限制，一般2-5mb
post没有大小限制（文件上传）
- 传输的速度不同
Get传输的速度快
Post传输的速度慢
- 安全性不同
Get安全性低
Post安全性高
什么是同源策略？
所谓同源策略就是浏览器的一种安全机制，来限制不同源的网站不能通信
同源就是域名，协议，端口都是一致的
http状态码分别代表什么意思？
1开头表示http请求已经接收，继续处理请求
2开头表示请求已经处理完成
3开头表示把请求访问的url重定向到其他目录
4开头表示客户端出现错误
- 表示服务端出现错误
BFC是什么？
Bfc（块级格式化上下文），一个创建了新的bfc的盒子是独立布局的，盒子内元素与的布局不会影响盒子外面的元素
js的数据类型有哪些？
- 基础数据类型：直接存储在栈中的数据
String number boolean null undefined symbol
- 复杂数据类型：真实的数据存放在堆内存当中
Array object function
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- 浏览器查找域名对应的ip地址，DNS查询
- 浏览器向服务器发送http请求（TCP三次握手)
- TCP/IP连接建立，浏览器发送http的get请求，服务器返回一个http响应
- 浏览器进行dom树构建，获取html资源，显示完成页面
谈谈构造对象，原型对象，实例对象
构造对象通过prototype指向原型对象，解决资源浪费和变量污染
原型对象通过constructort指向构造对象， 让实例对象知道自己被哪个构造函数创建
实例对象通过proto指向原型对象，让实例对象访问原型中的成员
在这三个之中可以将实例对象那比喻成儿子，原型对象是实例的妈妈，构造函数是实例对象的父亲
所有对象的原型链最终都是指向object.prototype 万物皆对象
而对象object.prototype最终指向null 万物皆空
CSRF 和 XSS 的区别
CSRF需要用户先登录网站A，获取到cookie
XSS不需要登录
原理上：
CSRF是利用网站A本身的漏洞，去请求网站A的api
XSS是向网站A注入js代码，执行js代码，篡改网站A的内容
cookie和session 的区别
Cookie和Session都用于存储信息。它们最主要的区别在于Cookie存储在客户端计算机上,而Session则存储在服务器上
cookie不是很安全，别人可以分析存放在本地的Cookie并进行Cookie欺骗,考虑到安全应当使用session。
1.2-localStorage与sessionStorage区别
- 1.相同点
-
作用一致`` ： 用于存储数据- 都是只能存储字符串类型数据(上限5MB)
- 2.不同点： 存储方式不同
-
localStorage : ``硬盘存储（永久存储，页面关闭还在，存在硬盘）sessionStorage ``：内存存储（临时存储，页面关闭了就消失）
- 3.localStorage与sessionStorage如何存储引用类型数据（数组和对象）
-
- 转json存储
**
call、aply、bind三者的异同
相同点：都可以改变this指向
不同点：
1.传参的方式不同
Call是逐一传参，aply传的是数组或者伪数组
2.执行机制不同
Call和aply是立即执行，bind不会立即执行
Call和aply用一次修改一次
Bind修改一次可以一直使用
v-if 和v-show有什么区别？
V-if是“真正”的条件渲染，操作的实际上是dom元素的创建或者销毁
V-show，不管初始条件，元素总被渲染，基于css切换，操作的是display里面的none或者block属性
v-if 有更高的切换开销，而v-show有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用v-if
防抖节流？
防抖和节流都是性能优化的一种手段。
是什么：持续触发（事件）不执行，不触发的一段时间后再执行。
举个生活中的例子：王者荣耀英雄回城。
实际怎么应用：根据输入的内容发请求。
// 节流：持续触发也执行，只不过执行的频率变低了。
// 生活中的例子：一直扣着扳机打散弹枪
什么是重绘和回流，如何减少重绘和回流？
重绘：外观属性发生变化（颜色、透明度、阴影、outline）
回流：几何属性
赠人玫瑰,点赞余香,觉得不错评论多交流哦!
