2023年前端面试题
css面试题
标准盒子模型和IE(怪异)盒子模型的区别
盒模型组成：内容区(content)、内边距(padding)、边框(border)、外边距(margin)
两者的区别在于width、height的不同：
标准盒子模型：width=content
ie盒子模型：width=content+border+padding
改变元素的盒模型：
box-sizing: content-box (标准盒模型) | border-box (怪异盒模型)
flex 1代表什么
用于设置或检索弹性盒模型对象的子元素如何分配空间，代表均匀分配元素。
是flex-grow、flex-shrink、flex-basic的简写属性
flex-grow：该属性默认值为0，如果存在剩余空间，元素也不放大，设置为1表示会放大；
flex-shrink：该属性默认值为1，如果空间不足，元素缩小；
flex-basic：默认值为auto，浏览器根据这个属性来计算是否有多余得空间。
什么叫优雅降级和渐进增强
渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本得功能，然后再针对高版本浏览器进行优化。
优雅降级：一开始就构建完整得功能，然后再针对浏览器进行测试与修复。
less与sass的区别
相同之处：
1、混入（Mixins）：class中的class；
2、参数混入：可以传递参数的class，就像函数一样；
3、嵌套规则：Class中嵌套class，从而减少重复的代码；
4、运算：CSS中用上数学；
5、颜色功能：可以编辑颜色；
6、名字空间(namespace)：分组样式，从而可以被调用；
7、作用域：局部修改样式；
8、JavaScript 赋值：在CSS中使用JavaScript表达式赋值。
不同点：
1、环境不同、处理机制不同，Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的；
2、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$
3、less比sass简单，跟css差不多，在CSS的基础上加入程序式语言的特性；
4、从功能出发，Sass较Less略强大一些
①sass有变量和作用域：$sideBarWidth: 155px; #{$sideBarWidth}，变量有全局和局部之分，并且有优先级
②sass有函数的概念：@function和@return、@mixin
③进程控制：条件：@if@else 、循环遍历：@for@each@while、继承：@extend 、引用：@import
④数据结构：-$list类型=数组；-$map类型=object；其余的也有string、number、function等类型
css优先级
1.！important 优先级10000
2.内联选择器 优先级1000 写在元素的style属性当中
3.ID选择器 优先级100
#one{}
4.类别选择器 优先级10
.one{}
5.属性选择器 优先级10
(1)用 "[属性]":
你好！
[title] {
color:blue;
}
(2)用 "[属性 = 值]":
你好！
[title=one] {
border:5px solid green;
}
(3) [属性~=值] 属性中包含独立的单词
你好！
你好啊！
[title~=one]{
color:blue;
}
(4) [属性|=值] 属性中必须是完整且唯一的单词，或用" - "隔开
你好！
你好！
[title|=one] {
background:#72D1FF;
font-weight:600;
text-align:center;
}
(5) [属性*=值] 属性中做字符串拆分，只要能拆出来 value 这个词就行
你好！
你好！
你好！
[title*=one] {
color:blue;
}
(6) [属性^=值] 属性的前几个字母是值就可以
你好!
你好!
[title^=one] {
color:blue;
}
(7)[属性$=值] 属性以值结尾就行
你好!
你好!
p[title$=one] {
color:blue;
}
表单样式：
input[type="text"]{}
6.伪类 优先级10
:hover、:active、:before、:after、:focus、:visited、:link、:lang
7.元素选择器 优先级1
div、h1-h6、p、html、body、
8.通配符选择器 优先级0
*
9.继承选择器 没有优先级
JS面试题
js数据类型
基本数据类型：null、undefined、Number、String、boolean、Symbol、bigInt
引用数据类型：Object、Array、Function、Date、RegExp
== 和 ===的区别
==：非严格意义上的相等，值相等就可以
===：严格意义上的相等，值和数据类型相等才相等
var、let、const区别
var：局部变量；存在变量提升，声明变量前打印不会报错；一个变量可以多次声明，后者会覆盖前者。
let：不存在变量提升，let声明变量前，该变量不能使用（暂时性死区）；在块级作用域内有效；不允许在相同作用域中重复声明，注意是相同的作用域，不同作用域重复声明不会报错；
const：必须初始化值；只读变量，声明后值不可改变，对于对象和数据这种引用类型可以改变里面的值（变量指向的内存地址所保存的数据不得改动）；
区别：
1、变量提升：var可以，let、const不存在；
2、块级作用域：var不存在块级作用域，let和const存在块级作用域；
3、重复声明：var允许被重复声明变量，let和const在同一作用域不允许重复声明变量
4、修改声明的变量：var和let可以，const声明一个只读的常量，一旦声明，常量的值就不能改变，但对于对象和数据这种引用类型，内存地址不能修改，可以修改里面的值
sessionStorage、localStorage、cookie的区别
sessionStorage：最大容量5M，当页面关闭后被清理与其他相比不能同源窗口共享 是会话级别的存储方式；
localStorage：最大容量5M，以键值对的方式存储，储存时间没有限制，永久生效，除非自己删除记录，ios safari隐藏模式下:localStorage.getItem会报错，建议统一使用try-catch封装 (setItem、getItem、removeItem、clear）
cookie：存储量太小，只有4kb；所有http请求都会携带，会影响获取资源的效率
存对象使用JSON.stringify()、取使用JSON.parse()
Set 和 Map有什么区别
1、Map是键值对，Set是值得集合，当然键和值可以是任何得值
2、Map可以通过get方法获取值，而set不能因为它只有值
3、都能通过迭代器进行for...of 遍历
4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储
地址栏输入域名地址之后发生了什么？
1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。
2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。
3、DNS解析： 下一步首先需要获取的是输入的 URL 中的域名的 IP 地址，首先会判断本地是否有该域名的 IP 地址的缓存，如果有则使用，如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存，如果没有就会先向根域名服务器发起请求，获得负责的顶级域名服务器的地址后，再向顶级域名服务器请求，然后获得负责的权威域名服务器的地址后，再向权威域名服务器发起请求，最终获得域名的 IP 地址后，本地 DNS 服务器再将这个 IP 地址返回给请求的用户。用户向本地 DNS 服务器发起请求属于递归请求，本地 DNS 服务器向各级域名服务器发起请求属于迭代请求。
4、获取MAC地址： 当浏览器得到 IP 地址后，数据传输还需要知道目的主机 MAC 地址，因为应用层下发数据给传输层，TCP 协议会指定源端口号和目的端口号，然后下发给网络层。网络层会将本机地址作为源地址，获取的 IP 地址作为目的地址。然后将下发给数据链路层，数据链路层的发送需要加入通信双方的 MAC 地址，本机的 MAC 地址作为源 MAC 地址，目的 MAC 地址需要分情况处理。通过将 IP 地址与本机的子网掩码相与，可以判断是否与请求主机在同一个子网里，如果在同一个子网里，可以使用 APR 协议获取到目的主机的 MAC 地址，如果不在一个子网里，那么请求应该转发给网关，由它代为转发，此时同样可以通过 ARP 协议来获取网关的 MAC 地址，此时目的主机的 MAC 地址应该为网关的地址。
5、TCP三次握手： 下面是 TCP 建立连接的三次握手的过程，首先客户端向服务器发送一个 SYN 连接请求报文段和一个随机序号，服务端接收到请求后向客户端发送一个 SYN ACK报文段，确认连接请求，并且也向客户端发送一个随机序号。客户端接收服务器的确认应答后，进入连接建立的状态，同时向服务器也发送一个ACK 确认报文段，服务器端接收到确认后，也进入连接建立状态，此时双方的连接就建立起来了。
6、HTTPS握手： 如果使用的是 HTTPS 协议，在通信前还存在 TLS 的一个四次握手的过程。首先由客户端向服务器端发送使用的协议的版本号、一个随机数和可以使用的加密方法。服务器端收到后，确认加密的方法，也向客户端发送一个随机数和自己的数字证书。客户端收到后，首先检查数字证书是否有效，如果有效，则再生成一个随机数，并使用证书中的公钥对随机数加密，然后发送给服务器端，并且还会提供一个前面所有内容的 hash 值供服务器端检验。服务器端接收后，使用自己的私钥对数据解密，同时向客户端发送一个前面所有内容的 hash 值供客户端检验。这个时候双方都有了三个随机数，按照之前所约定的加密方法，使用这三个随机数生成一把秘钥，以后双方通信前，就使用这个秘钥对数据进行加密后再传输。
7、返回数据： 当页面请求发送到服务器端后，服务器端会返回一个 html 文件作为响应，浏览器接收到响应后，开始对 html 文件进行解析，开始页面的渲染过程。
8、页面渲染： 浏览器首先会根据 html 文件构建 DOM 树，根据解析到的 css 文件构建 CSSOM 树，如果遇到 script 标签，则判端是否含有 defer 或者 async 属性，要不然 script 的加载和执行会造成页面的渲染的阻塞。当 DOM 树和 CSSOM 树建立好后，根据它们来构建渲染树。渲染树构建好后，会根据渲染树来进行布局。布局完成后，最后使用浏览器的 UI 接口对页面进行绘制。这个时候整个页面就显示出来了。
9、TCP四次挥手： 最后一步是 TCP 断开连接的四次挥手过程。若客户端认为数据发送完成，则它需要向服务端发送连接释放请求。服务端收到连接释放请求后，会告诉应用层要释放 TCP 链接。然后会发送 ACK 包，并进入 CLOSE_WAIT 状态，此时表明客户端到服务端的连接已经释放，不再接收客户端发的数据了。但是因为 TCP 连接是双向的，所以服务端仍旧可以发送数据给客户端。服务端如果此时还有没发完的数据会继续发送，完毕后会向客户端发送连接释放请求，然后服务端便进入 LAST-ACK 状态。客户端收到释放请求后，向服务端发送确认应答，此时客户端进入 TIME-WAIT 状态。该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃） 时间，若该时间段内没有服务端的重发请求的话，就进入 CLOSED 状态。当服务端收到确认应答后，也便进入 CLOSED 状态。
UDP和TCP有什么区别
HTTP和HTTPS协议的区别
1、HTTPS协议需要CA证书,费用较高;而HTTP协议不需要
2、HTTP协议是超文本传输协议,信息是明文传输的,HTTPS则是具有安全性的SSL加密传输协议;
3、使用不同的连接方式,端口也不同,HTTP协议端口是80,HTTPS协议端口是443;
4、HTTP协议连接很简单,是无状态的;HTTPS协议是具有SSL和HTTP协议构建的可进行加密传输、身份认证的网络协议,比HTTP更加安全
性能优化
1、减少HTTPS请求数
2、减少DNS查询
3、减少DOM操作
4、使用CDN加速
5、图片、路由懒加载
6、压缩js、css、字体、图片等
7、使用iconfont
8、引用外部js、css
9、css放页面头部、js放页面尾部
10、异步路由
11、第三方插件按需引入
12、适当采用keep-alive缓存组件
13、防抖、节流的运用
14、服务端渲染SSR或者预渲染
15、Nginx的gzip压缩和Webpack开启gzip压缩
16、使用骨架屏
17、Promise优化
18、压缩图片
19、少用location.reload()
20、正确使用display属性
21、合理使用缓存
浏览器渲染的流程？
1. 请求html文件处理html标记构建DOM树；
2. 请求css文件处理css标记构建CSSOM树；
3. 将DOM和CSSOM合并成一个渲染树；
4. 根据渲染树布局，以计算每个节点的几何信息；
5. 将各节点绘制在屏幕上；
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
怎么解决白屏问题
加loading、加骨架屏
Rem你是怎么做适配的
less+@media（媒体查询）+rem
@media(媒体查询)+flexble.js+rem
什么是防抖和节流?区别是什么?
防抖和节流本质是不一样的。防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行
防抖(debounce):防抖触发高频率事件时n秒后只会执行一次,如果n秒内再次触发,则会重新计算。
概述:每次触发时都会取消之前的延时调用。比如：按钮点击事件，一直点点，只会执行最后一次点击的事件。
节流(thorttle):高频事件触发,每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法。
概述:每次触发事件时都会判断是否等待执行的延时函数。比如：短时间内触发一个事件，在函数执行一次之后，在指定的时间期限内将不再工作，直到过了这个时间才从新执行。
区别:降低回调执行频率,节省计算资源。
函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。
哪些情况会导致内存泄漏
1、意外的全局变量：由于使用未声明的变量,而意外的创建了一个全局变量,而使这个变量一直留在内存中无法被回收
2、被遗忘的计时器或回调函数：设置了 setInterval 定时器，而忘记取消它，如果循环函数有对外部变量的引用的话，那么这个变量会被一直留在内存中，而无法被回收。
3、脱离 DOM 的引用：获取一个 DOM 元素的引用，而后面这个元素被删除，由于一直保留了对这个元素的引用，所以它也无法被回收。
4、闭包：不合理的使用闭包，从而导致某些变量一直被留在内存当中。
请解释一下 JavaScript 的同源策略
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性
闭包
能够读取其他函数内部的变量
一个函数内部返回一个函数
好处：
可以读取函数内部的变量
将变量始终保持在内存中
可以封装对象的私有属性和私有方法
坏处：
比较耗费内存、使用不当会造成内存溢出的问题
vue面试题
MVC与MVVM的区别
1、mvc和mvvm都是一种设计思想。 主要就是mvc中Controller演变成mvvm中的viewModel。 mvvm主要解决了mvc中大量DOM操作使页面渲染性能降低，加载速度变慢的问题 。
2、MVVM与MVC最大的区别就是：它实现了View和Model的自动同步：当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的显示，它会自动变化。
3、整体看来，MVVM比MVC精简很多，我们不用再用选择器频繁地操作DOM。
v-model双向绑定原理
v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(input、change)事件，来动态修改model和view，从而达到双向数据绑定的效果。
this
this总是指向函数的直接调用者
如果有new关键字，this指向new出来的对象
在事件中，this指向触发这个事件的对象
scoped的作用和原理
作用：避免子组件中的css样式被父组件覆盖
原理：给元素添加一个自定义属性 v-data-xxxxx， 通过属性选择题来提高css权重值
map与forEach的区别
foreach：会对每一个元素执行提供函数，没有返回值，是否改变原数组取决与数组元素的类型是基本类型还是引用类型
map：不会改变原数组的值，返回一个新的数组，新数组中的值为原数组调用函数处理之后的值
v-for与v-if的优先级
两者同时使用，v-for的优先级比v-if的大，v-for的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中同时使用
vue2：v-for优先级是比v-if高
vue3：v-if优先级是比v-for高
v-if 和 v-show 有什么区别
都是对dom元素进行显示与隐藏
v-if：动态的向dom树内添加或者删除dom元素，适合应用于不大可能改变的，有更高的切换消耗
v-show：对dom元素的display样式属性进行控制隐藏。适用于频繁切换到的，有更高的初始渲染消耗
vue 常用的修饰符
.stop 阻止事件继续传播
.prevent 阻止默认行为
.noce 事件只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
.lazy 通过这个修饰符，转变为在 change 事件再同步
.number 自动将用户输入值转化为数值类型
.trim 自动过滤用户输入的收尾空格
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
组件传值有哪些
1、父传子：props
2、子传父：$emit
3、兄弟组件通信：（bus：一个事件总线（公共汽车））
Vue.prototype.$bus = new Vue();
父组件引入两个子组件；
第一个子组件传值给另一个子组件，this.$bus.$emit('send',{name:"张三"});
另一个子组件获取，this.$bus.$on('send',res => { console.log(res); });
4、Vuex状态管理，一值影响多个地方，全局需要使用等
5、本地存储localStorage、sessionStorage
6、provide父组件传值、inject子组件接收，provide:{ name:"张三" }，inject:["name"]
7、$parent：获取到 父组件 中的 props 、 data或者方法； $children：获取到 子组件 中的 props 、 data或者方法
8、$attrs：接收除了props声明外的所有绑定属性（class、style除外） ；$listeners：接收除了带有.native事件修饰符的所有事件监听器
8、$ref：常用于操作底层DOM操作（使用场景：更改ref的属性值，这个时候用它）
Vuex有哪几种属性
state：基本数据
getters：从基本数据派生出来的数据
mutations：提交更改数据的方法，同步
actions：类似于mutations，支持异步操作
module：模块化vuex
为什么用key
给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更快
$nextTick的使用
在data()中的值修改后，无法马上获取到修改后的值，使用$nextTick进行回调，再将修改后的值实时渲染更新
created与mounted的区别
created：在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
vuex生命周期 每个钩子里面具体做了什么事情
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。
1、beforeCreate（创建前） ：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。
2、created（创建后） ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 `$el` 属性。
3、beforeMount（挂载前） ：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
4、mounted（挂载后） ：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。
5、beforeUpdate（更新前） ：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。
6、updated（更新后）：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy（销毁前） ：实例销毁之前调用。这一步，实例仍然完全可用，`this` 仍能获取到实例。
8、destroyed（销毁后） ：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。
另外还有 `keep-alive` 独有的生命周期，分别为 `activated` 和 `deactivated` 。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。
Vue的父子组件生命周期钩子函数执行顺序？
加载渲染过程：
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount ->子mounted->父mounted
子组件更新过程：
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程：
父 beforeUpdate -> 父 updated
销毁过程：
父 beforeDestroy-> 子 beforeDestroy -> 子 destroyed-> 父 destroyed
vue组件中data为什么必须是一个函数？
因为JavaScript的特性所致，在组件中，data必须以函数的形式存在，不可以是对象。
组件中的data写出一个函数，数据以函数返回值的形式定义，在组件复用时，都会返回一个新的data，相当于每个组件都有自己私有的数据空间，各自维护自己的数据，不会造成混乱。
如果写成对象形式，那就是所有组件共用一个data，改变一个的话就所有的改变了。
watch和computed的区别
computed 计算属性 ：依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 ：更多的是观察的作用，无缓存性，类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
路由的hash和history模式的区别
vue-router路由有两种模式：hash模式和history模式，路由默认是hash模式
hash模式：
介绍：url中带有#，例如：http://www.abc.com/#/home，hash值就是#/home
特点：hash值会出现在url中，但不是出现在https请求中，对后端完全没有影响。改变hash值不会重新加载页面，这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。
原理： hash模式的主要原理就是onhashchange()事件：
history模式：
简介： history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。
特点： 当使用history模式时，URL就像这样：abc.com/user/id。相比hash模式更加好看。但是，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
API： history api可以分为两大部分，切换历史状态和修改历史状态：（1）利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）。提供了对历史记录进行修改的功能，改变了当前的 URL，但浏览器不会立即向后端发送请求
（2）切换历史状态： 包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。
使用history路由刷新页面白屏问题
1、sessionStorage 或者 localStorage存储：页面一加载就存储 比较局限
2、服务端Nginx配置：
location / {
try_files $uri $uri/ /index.html;
}
3、webpack配置文件中的publicPath属性：vue.config.js文件修改pulicpath‘./’改成'/'，注意的是强缓存和协议缓存
$route与 $router得区别
$route：路由信息对象，获取路由中的一些信息参数，如：params、query、name等；
$router：路由实例，路由的跳转和钩子函数等。
Vue是如何对数据进行监听的？
对象数据是怎么被监听的?
通过Object.defineProperty来劫持对象属性的setter和getter操作，并创建一个监听器，当数据发生变化的时候发出通知
数组数据是怎么被监听的?
01先获取原生 Array 的原型方法，因为拦截后还是需要原生的方法帮我们实现数组的变化。
02对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。
03把需要被拦截的 Array 类型的数据原型指向改造后原型。
详解Vue如何监测数组的变化
1、通过vue.js提供得方法来更新，可以使用：Vue.set、vm.$set、pop()、shift()、unshift()、push()、slipce()、sort()、reverse()。
2、使用专门用于监测数组变化的语法糖，v-for指令自动重新渲染视图。
3、使用Vue.observable()函数
4、使用 computed 属性和 watch 属性监测数组变化
5、使用 Deep Watcher 方法
6、使用 $watch 函数
mounted() {
this.$watch(
'myArray',
function(newVal, oldVal) {
// do something with the new and old value of myArray
},
{
deep: true
}
)
}
7、使用 Vue 的 $forceUpdate() 方法
8、使用 Vue 中的 $nextTick() 方法
9、使用 reactive 函数，vue3
10、使用 vue-devtools 中的 track 功能，该方法无法解决修改数组未触发视图更新的问题，属于数组监测问题
import和require的区别
import是ES6模块的语法，require是CommonJS模块的语法；
import使用时可以将一个模块中的多个部分分别导入到当前模块中，require只能将整个模块导入；
import是编译时加载，require是运行时加载；
import必须放在文件的顶部，require可以放在文件的任何地方。
路由跳转的方式
1、path路径跳转
登录
2、命名式路由跳转 name:路由中的name属性值
购物车
3、编程式路由跳转
this.$router.push({
path:"/list"，
query:{
id:this.id
}
})
this.$router.push({
name:"list"，
params:{
id:this.id
}
})
接收：this.$route.query.id 或者 this.$route.params.id
vue如何实现双向据绑定？
Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图
通过Object.defineProperty()来劫持各个属性的setter， getter，在数据发生变动时通知Vue实例，触发相应的getter和setter回调函数。
当把一个普通 Javascript 对象传给Vue 实例来作为它的 data 选项时， Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
浅拷贝与深拷贝
浅拷贝：Object.assign()、展开运算符...、函数库lodash的_clone、Array.prototype.concat()、Array.prototype.slice()
深拷贝：JSON.parse(JSON.stringify())、函数库lodash的_.cloneDeep方法、jQuery.extend()方法、手写递归
插槽是什么 怎么使用的
作用：提高组件通用性
类型：
1、默认插槽Es6常见的语法你知道哪一些
1、let、const
2、箭头函数
3、扩展运算符
4、Symbol
5、模板字符串
6、解构赋值
let a = [1, 2, 3]
let {b,...c} = a
b:1 c:{2, 3}
7、迭代器
8、生成器
9、函数默认参数
10、Set和Map数据结构
11、Object.assign()方法
12、import和export 用法
13、promise对象
14、asyn 和 await 函数
Vue常用得遍历方法
1. map：会遍历整个数组的循环，会得到一个新的数组
2. forEach：无任何返回，可改变原来数组中的内容，不支持return
3. filter：遍历数组会返回一个新的数组
4. some：符合条件时返回ture,否则返回false
5. every：用于检测所有数组项中是否都符合某个条件，如果都符合则返回true，只要有一项不符合则返回false，后面的元素则不遍历
6. findIndex：会返回符合对象或项所在的索引值，否则返回-1
7. find：有返回值，符合条件会返回一个数组中的项，比如对象
async await
一、async/await是什么？
async用于申明function是异步得，await是等待一个异步方法执行完成。
二、async/await基础使用
async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值
三、async/await的特点
Async作为关键字放在函数前面，普通函数变成了异步函数
异步函数async函数调用，跟普通函数调用方式一样。在一个函数前面加上async，变成 async函数，异步函数，return:1，打印返回值，
返回的是promise成功的对象，
Async函数配合await关键字使用
四、async/await的优点
方便级联调用；同步代码编写方式；多个参数传递；同步代码和异步代码可以一起编写；基于协程；async/await是对Promise的优化