前端面试题---2022

*集大成之面试题，我们不做面试题的创作者，只做面试题的搬运工（侵必删）

〇 理论

一个完整的URL 解析过程

1 用户输入 URL 地址。
2 对 URL 地址进行 DNS 域名解获得IP地址。
3 建立 TCP 连接（三次握手）。
4 浏览器向 web 服务器发送一个 HTTP 请求报文。
5 服务器返回 HTTP 响应报文给客户端。
6 关闭 TCP 连接（四次挥手）。
7 浏览器解析文档资源并渲染页面。
解析过程：浏览器解析的资源（html，svg,Xhtml等），解析完成后都会生成一个完整的DOM Tree ，css资源则会解析成CSS Rule Tree，生成之后进行浏览器渲染，保证脚本执行前已完成DOM渲染会放在body标签结束之后。

EventLoop是什么

• Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理，是一个程序结构，用于等待和发送消息和事件。

1. 主要的宏任务有：

   setTimeout
   setInterval
   setImmedate
   MessageChannel
   requestAnimationFrame
   I/O
   UI交互事件

2. 微任务有：
   console.log()
   Promise.then
   MutationObserver
   Object.observe
   process.nextTick

执行过程： 事件循环的顺序，决定了JavaScript代码的执行顺序。它从script(整体代码)开始第一次循环（即宏任务）。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局)，然后执行所有的micro-task（微任务）。当所有可执行的micro-task（微任务）执行完毕之后。循环再次从macro-task（宏任务）开始，找到其中一个任务队列执行完毕，然后再执行所有的micro-task（微任务），这样一直循环下去

HTTP和HTTPS

什么是HTTP和HTTPS

• HTTP ：超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法。

• HTTPS ：是一种通过计算机网络进行安全通信的传输协议，经由HTTP进行通信，利用SSL/TLS建立全信道，加密数据包。HTTPS使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私与完整性。
  PS:TLS是传输层加密协议，前身是SSL协议，由网景公司1995年发布，有时候两者不区分。

区别

1、HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。(以前的网易官网是http，而网易邮箱是 https 。)

2、HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。

3、HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

https加密方式

1. 共享密钥加密（对称密钥加密）：客户端和服务器公用一个密匙用来对消息加解密，这种方式称为对称加密。客户端和服务器约定好一个加密的密匙。客户端在发消息前用该密匙对消息加密，发送给服务器后，服务器再用该密匙进行解密拿到消息

2. 公开密钥加密（非对称密钥加密）：客户端和服务端均拥有一个公有密匙和一个私有密匙。公有密匙可以对外暴露，而私有密匙只有自己可见。使用公有密匙加密的消息，只有对应的私有密匙才能解开。反过来，使用私有密匙加密的消息，只有公有密匙才能解开。这样客户端在发送消息前，先用服务器的公匙对消息进行加密，服务器收到后再用自己的私匙进行解密。

3. 数字证书
   由数字证书认证机构（CA，certificate authority）和其相关机构颁发的公开密钥证书。

而https使用的是对称加密+非对称加密，使用非对称加密传输一个对称密钥K，让服务器和客户端都得知。然后两边都使用这个对称密钥K来加密解密收发数据。因为传输密钥K是用非对称加密方式，很难破解比较安全。而具体传输数据则是用对称加密方式

强缓存和协商缓存

1. 强缓存（本地缓存）：
   直接使用使用本地缓存，不用跟服务器进行通信
   header:Expires/Cache-Control
   状态码为：200
2. 协商缓存
   将资源一些相关信息返回服务器，让服务器判断浏览器是否能直接使用本地缓存，整个过程至少与服务器通信一次
   header:Last-Modified/Etag
   状态码为：304

用户的行为对缓存的影响

用户操作

Expires/Cache-Control (强缓存)

Last-Modified/Etag(协商缓存)

地址栏回车

有效

有效

页面链接跳转

有效

有效

新开窗口

有效

有效

前进后退

有效

有效

F5刷新

无效

有效

Ctrl+F5强制刷新

无效

无效

什么是 MVVM？

• M(模型)：模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

• V(视图)：就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

• VM(视图模型)：视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue数据双向绑定原理

Vue2.X的双向绑定响应式原理

什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个 专属的依赖收集器 subs，当页面使用到 某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被 放到 属性的依赖收集器 subs 中，在 数据变化时，通知更新；
当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的 依赖收集器 subs，逐个通知 watcher，视图开始更新；

Vue3.x双向绑定响应式数据原理

Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

Vue3 里为什么要用 Proxy API替代 defineProperty API？

1. defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
   Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2. Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
   Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
3. 响应式是惰性的。
   在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
   在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。

什么是虚拟DOM

virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。
目的是为了减少回流和重绘，提升性能。
虚拟DOM基本步骤

1. 页面初始加载解析DOM树，将DOM解析为JS对象
   [最终还需要将其映射成真实DOM，渲染到页面]

2. DOM结构要发生变化，生成一个新的JS对象

3. DIFF比较，比较同级对象

4. 将不同之处写入到patch对象中

5. 渲染到页面

那么为什么用虚拟dom呢？

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

大白话：就是为了提高代码效率，渲染效果，就如往常的js jquery这些使用dom操作时都是一段复杂的过程，整个过程要遍历属性，标签啦，就是在你的代码上一遍遍寻找大半天还不知道有没有收获，很慢。而且做多件事情的时候只能一件件去做，浪费很多时间，而我们的虚拟dom呢，就是，把你想要做的事情都用小本子记起来（记在本地js对象上）在虚拟dom上更新完成后，再拿到真是的dom上去渲染，然后交给浏览器绘制页面呀。从头到末尾，人家知道每一步要做什么，而且可以同时做，还不会等到你的页面渲染完成后才出发，人家可是早早出发了，

真实DOM和虚拟DOM的区别

那么说回到真实DOM，虚拟DOM和真实DOM又有什么区别呢？
我想，应该会有一下几点：

• 虚拟DOM不会进行排版与重绘操作
• 真实DOM频繁排版与重绘的效率是相当低的
• 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
• 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

DIFF算法

vue diff算法

Diff算法步骤

1. 用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3. 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，不仅仅是同层级对比，在diff算法中也会进行同key值对比和同组件对比
Diff 过程整体策略：深度优先，同层比较

key的作用

在使用v-forj添加唯一的key的作用标识，Diff算法就可以正确的识别此节点，找到正确的位置区更新新的节点，高效的更新虚拟DOM。

vue等单页面应用及其优缺点

缺点：

不支持低版本的浏览器，最低只支持到IE9；
不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。

优点：

无刷新体验,提升了用户体验；
前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，同一套后端程序代码不用修改就可以用于Web界面、手机、平板等多种客户端
用户体验好、快，内容的改变不需要重新加载整个页面。

一 Js

二 Vue

vue面试题很全面

vue 的优点是什么？

• 低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的"View"上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
• 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

vue生命周期的理解？

vue实例有一个完整的生命周期，生命周期也就是指一个实例从开始创建到销毁的这个过程

总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

• beforeCreated() 在实例创建之间执行，数据未加载状态
• created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
• beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
• mounted() 页面、数据渲染完成，真实dom挂载完成
• beforeUpadate() 重新渲染之前触发
• updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
• beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行

vue中v-if和v-show有什么区别？

v-if和v-show都会让元素显示和隐藏，但是v-if是通过移除和添加dom元素，v-show是通过display:none来实现隐藏

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if
V-if=’false’v-if是条件渲染，当false的时候不会渲染
使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成
v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏
v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

为什么在使用v-for的时候需要添加key属性

因为vue在更新渲染dom的时候是根据新旧dom树进行对比的，使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。Vue的优化点之一

vue中的父子组件传值和兄弟组件传值都是如何实现的？

父向子传值，主要通过子组件的props，获取父组件绑定的数据

子向父传值，主要通过子组件利用$emit触发父组件上的事件

兄弟组件传值利用eventbus的方式，主要利用创建一个空的vm实例，作为中间者

组件之间数据共享

组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。针对不同的使用场景，如何选择行之有效的通信方式？

1：props emit 缺点：如果组件嵌套层次多的话，数据传递比较繁琐
2：provide inject (依赖注入)，缺点：不支持响应式
3：this. r o o t t h i s . root this. rootthis.parent this.$refs
4: eventbus 缺点：数据不支持响应式
5: vuex 缺点：数据的读取和修改需要按照流程来操作，不适合小型项目

父子通信：
父组件向子组件传递数据可以通过 props；
子组件向父组件是通过 $emit、$on事件；
provide / inject ；
还可以通过 $root、$parent、$refs属性相互访问组件实例；
兄弟通信： eventbus ；Vuex；
跨级通信： eventbus ；Vuex；provide / inject；

如何让css只在当前组件中起作用

在每一个vue组件中都可以定义各自的css，js，如果希望组件内写的css只对当前组件起作用，只需要在style中写入scoped，即：

$root、$parent、$refs

1、$root Vue 子组件可以通过$root 属性获取vue的根实例，比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store ),因此可以代替vuex实现状态管理；

2、$parent 属性可以用来从一个子组件访问父组件的实例，可以替代将数据以 prop 的方式传入子组件的方式；当变更父级组件的数据的时候，容易造成调试和理解难度增加；

3、在子组件上使用ref特性后，this.$refs 属性可以直接访问该子组件。可以代替事件$emit 和$on 的作用。使用方式是通过 ref 特性为这个子组件赋予一个 ID 引用，再通过this.$refs.testId获取指定元素。注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

Vue输入框事件监听blur与change的差异

blur与change事件在绝大部分的情况下表现都非常相似，输入结束后，离开输入框，会先后触发change与blur，唯有两点例外。

1. 没有进行任何输入时，不会触发change
   在这种情况下，输入框并不会触发change事件，但一定会触发blur事件。在判断表单的修改状态时，这种差异会非常有用，通过change事件能轻易地找到哪些字段发生了变更以及其值的变更轨迹。
2. 输入后值并没有发生变更
   这种情况是指，在没有失焦的情况下，在输入框内进行返回的删除与输入操作，但最终的值与原值一样，这种情况下，keydown、input、keyup、blur都会触发，但change依旧不会触发。

vue store存储commit 和dispatch

主要区别是：

• dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
• commit：同步操作，写法：this.$store.commit('mutations方法名',值)

Vue项目性能优化

1.懒加载

懒加载应该是提高性能的最简单有效的方式了，一个项目加上懒加载速度和逼格都会上一个台阶。懒加载的意义在于按需加载，不会让项目刚开始运行速度就很慢，能大大的优化用户体验。Vue项目懒加载分为图片懒加载和路由懒加载，具体写法如下：

路由懒加载

{
  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'],resolve)
},{
  path: '/index',
  name: 'Index',
  component: resolve => require(['@/components/index'],resolve)
},{
  path: '/about',
  name: 'about',
  component: resolve => require(['@/components/about'],resolve)
} 

图片懒加载

2.代码优化

• 不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher
• vue 在 v-for 时给每项元素绑定事件需要用事件代理
• SPA 页面采用keep-alive缓存组件
• 拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 )
• v-if 当值为false时内部指令不会执行,具有阻断功能，很多情况下使用v-if替代v-show
• key 保证唯一性 ( 默认 vue 会采用就地复用策略 )
• Object.freeze 冻结数据
• 合理使用路由懒加载、异步组件
• 尽量采用runtime运行时版本
• 数据持久化的问题 （防抖、节流）
• 减少本地储存

3.用户体验优化

添加Loading

当用户需要等待时间较长时，必须添加等待loading，这个不多说，用处大大地

添加骨架屏

路由逻辑

路由逻辑是一个项目的核心，如果路由逻辑不通的话，用户很有可能点返回按钮的时候一直在两个页面之间跳转，进入死循环。其次，路由逻辑和用户体验息息相关，比如用户下完单应该跳转到订单详情页，而不是首页等等

样式统一

两个页面的相同功能按钮，它的大小颜色如果不用的话就会让人感觉你的App不够专业

vue-cli如何新增自定义指令？

分为局部指令和全局指令，通过directive [drektv] ，创建，

在单文件中创建局部指令，使用Vue.directive创建全局指令

vue更新数组时触发视图更新的方法

Vue.set    ==========Vue.set(target,key,value)这个方法主要是用于避开vue不能检测属性被添加的限制
Vue.set(array, indexOfItem, newValue)//indexOfItem指的索引
this.array.$set(indexOfItem, newValue)
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
Vue.delete   这个方法主要用于避开vue不能检测到属性被删除；

Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)

Vue 对象怎么添加删除 $set 有神吗作用

当成vue实例，再次给数据赋值，有时候数据并没有更新视图，是因为受到es5 的限制，vue不能检测到对象属性的添加或者删除，vue在初始化实例的时候将属性 转换为getter/setter， 使 s e t ， 让 其 有 g e t t e r / s e t t e r V u e . s e t ( ) 是 将 s e t 函 数 绑 定 在 V u e 的 构 造 函 数 上 ， t h i s . set，让其有getter/setter Vue.set()是将set函数绑定在Vue的构造函数上，this. set，让其有getter/setterVue.set()是将set函数绑定在Vue的构造函数上，this.set是将set函数绑定在Vue原 型上

Vue中computed和watch的区别

computed特性
1.是计算值，
2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性
1.是观察的动作，
2.应用：监听props，$emit或本组件的值执行异步操作
3.无缓存性，页面重新渲染时值不变化也会执行

• 计算属性可以简化差值表达式写法
• 计算属性变量定义在computed中，可以直接使用在｛｝中的，跟methods中函数类似，只不过有利于缓存，性能更好
• 计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。

methods与computed的区别

• computed是属性调用，而methods是函数调用；
• computed带有缓存功能，而methods不是；
• 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
• 可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

三 Vuex

vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走action，但action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。

vuex 是什么？怎么使用？哪种功能场景使用它？

vue 框架中全局状态管理。新建了一个目录 store，…… export 。import 引入 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

简要介绍各模块在流程中的功能：

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex 有哪几种属性

有 5 种，分别是 state、getter、mutation、action、module

vuex 的 store 特性是什么

• vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data
• state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
• 它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 特性是什么

• getter 可以对 state 进行计算操作，它就是 store 的计算属性
• 虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
• 如果一个状态只在一个组件内使用，是可以不用 getters

vuex 的 mutation 特性是什么

• action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
• action 可以包含任意异步操作

vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

不用 vuex 会带来什么问题

• 可维护性会下降，你要修改数据，你得维护 3 个地方
• 可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
• 增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？美团

Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

state 内部支持模块配置和模块嵌套，如何实现的？美团

在 store 构造方法中有 makeLocalContext 方法，所有 module 都会有一个 local context，根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder’, payload)这类 action 时，默认的拿到都是 module 的 local state，如果要访问最外层或者是其他 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？美团

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder’, payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？美团

Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。

Pinia（vuex5）

替代vuex 的方案比vuex更好用更简单
pinia
Pinia与Vuex的对比

四 vue-router

vue-router是什么？有哪些组件？

• Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
• 和和

active-class 是哪个组件的属性？

active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

指令keep-alive

keep-alive的作用以及好处

在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

在vue-router写着keep-alive，keep-alive的含义：

如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令

keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

怎么定义vue-router的动态路由？怎么获取传过来的值？

• 动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

  {
  path: ‘/details/:id’
  name: ‘Details’
  components: Details
  }
  12345

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

• 当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

  console.log(this.$route.params.id)

vue-router 传参

name传递
to来传递
采用url传参

Params

• 只能使用name，不能使用path
• 参数不会显示在路径上
• 浏览器强制刷新参数会被清空，

Query:

• 参数会显示在路径上，刷新不会被清空
• name 可以使用path路径

vue-router的两种模式

hash

• 原理是onhashchage事件，可以在window对象上监听这个事件

history

• 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
• 需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，

vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消。

全局的:**前置守卫、后置钩子（beforeEach，afterEach）beforeResolve

**单个路由独享的:**beforeEnter

**组件级的:beforeRouteEnter（不能获取组件实例 this）、beforeRouteUpdate、beforeRouteLeave
这是因为在执行路由钩子函数beforRouteEnter时候，组件还没有被创建出来；
先执行beforRouteEnter，再执行组件周期钩子函数beforeCreate，可以通过 next 获取组件的实例对象，如：next( (vm)=>{} )，参数vm就是组件的实例化对象。

完整的 vue-router 导航解析流程

1.导航被触发；
2.在失活的组件里调用beforeRouteLeave守卫；
3.调用全局beforeEach守卫；
4.在复用组件里调用beforeRouteUpdate守卫；
5.调用路由配置里的beforeEnter守卫；
6.解析异步路由组件；
7.在被激活的组件里调用beforeRouteEnter守卫；
8.调用全局beforeResolve守卫；
9.导航被确认；
10…调用全局的afterEach钩子；
11.DOM更新；
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

webpack构建流程

1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数

2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译

3. 确定入口，通过entry找到入口文件

4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理

5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系

6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表

7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中

如何利用webpack来优化前端性能

1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码

2. 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径

3. 删除死代码（tree shaking），css需要使用Purify-CSS

4. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替

什么是bundle,什么是chunk，什么是module

bundle:有webpack打包出来的文件
chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块
module:开发中的单个模块

DefinePlugin

DefinePlugin ：允许创建一个在编译时可以配置的全局变量

DllPlugin

使用DllPlugin可以减少基础模块编译次数，动态链接库插件，其原理是吧网页依赖的基础模块抽离出来打包到dll文件中，当需要导入的模块存在于某个dll中时，这个模块不再被打包，而是去dll中获取。在dll中大多包含的时常用的第三方模块，只要这些模块版本不升级，就只需要被编译一次。
*注意*
DllPlugin参数中的name必须要和output.library值保持一致，并且生成的mainfest文件中会引用output.library值

happyPack开启多线程loader转换

运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能

有哪些常见的Loader？他们是解决什么问题的？

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
• eslint-loader：通过 ESLint 检查 JavaScript 代码

有哪些常见的Plugin？他们是解决什么问题的？

• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

Loader和Plugin的不同？

不同的作用

• Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
• Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

不同的用法

• Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
• Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

是否写过Loader和Plugin？描述一下编写loader或plugin的思路？

Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个Loader通过链式操作，将源文件一步步翻译成想要的样子。

编写Loader时要遵循单一原则，每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用this.callback()方法，将内容返回给webpack。 还可以通过 this.async()生成一个callback函数，再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。

相对于Loader而言，Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

webpack打包优化

1、版本升级
与Webpack相关的工具版本要升级，如Node.js, npm, yarn等。
2、在loader. 上尽可能少的应用模块
比如在loader.上使用include, exclude等，让loader的作用范围尽量小。
3、plugin 的使用
plugin尽可能精简，并推荐使用官方的plugin, 或官方推荐的plugin。

4、合理的使用resolve

十 优化

vue 优化

一．源码优化

1、代码模块化，咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

2、for循环设置key值，在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

3、Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。

4、更加理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null。

5、可以使用keep-alive，keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

6、扁平化Store数据结构，

二．打包优化

1、修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。

2、使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。

3、减少图片使用，因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

4、按需引入，咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，可以只引入需要用到的组件。

三 用户体验优化

1、添加Loading，当用户需要等待时间较长时，必须添加等待loading，这个不多说，用处大大地

2、添加骨架屏

3、路由逻辑，路由逻辑是一个项目的核心，如果路由逻辑不通的话，用户很有可能点返回按钮的时候一直在两个页面之间跳转，进入死循环。其次，路由逻辑和用户体验息息相关，比如用户下完单应该跳转到订单详情页，而不是首页等等

4、样式统一，两个页面的相同功能按钮，它的大小颜色如果不用的话就会让人感觉你的App不够专业

react 优化

bind函数

绑定this的方式：一般有下面几种方式

• constructor中绑定

  constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this); //构造函数中绑定
  }
  //然后可以

  123456

• 使用时绑定

  1

• 箭头函数

使用代码分割

实现按需加载，例如在点击事件之后才会执行加载

使用之前：

import OtherComponent from './OtherComponent';

使用之后：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

组件化

组件分类：逻辑业务组件，渲染组件，可复用组件

webpack

webpack优化前端性能

1. 压缩代码。删除多余的代码、注释、简化代码的写法等等方式
2. 利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为 CDN 上对应的路径
3. 删除死代码，将代码中永远不会走到的片段删除掉
4. 优化图片，对于小图可以使用 base64 的方式写入文件中
5. 按照路由拆分代码，实现按需加载，提取公共代码
6. 给打包出来的文件名添加哈希，实现浏览器缓存文件

对css的优化使用mini-css-extract-plugin插件

对于CSS文件中包含的不必要的字符，例如注释、空白和缩进，我们可以在生产环境中将其删除，以达到减小文件大小的目的，这种技术也叫minification。而这些可以利用webpack构建工具进行实现。

optimize-css-assets-webpack-plugin插件用于优化或者压缩CSS资源

十一其他

uni-app中的坑

1. 如果是自定义的导航栏，video是原生的video,它的层级真的是太高了，想要盖住还得使用cover-view才能盖住。

2. picker真的是太不好用了，还不能修改文字，做中英文版本的话得用**picker-view**自定义组件或者使用插件。

3. 当你需要将时间转化为时间戳的时候需要用到Date.parse这个方法，例如:
   2019-09-20 10:12:43这个字符串时间要转化成时间戳，你需要将-替换为/，下附代码。

   Date.parse(xxx.replace(/-/g, ‘/’)) / 1000 #xxx为字符串时间

4. 组件内引入图片要使用绝对路径。/static/...

5. 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted。

6. 用tap事件代替click事件。

7. 阻止事件冒泡时要在外层加一层标签，直接在需要使用的方法上加.stop无效。

8. 中最好写一个写样式，而不是在picker上加样式。

9. 中写position: fixed，在ios下会有兼容性问题。

10. 出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=""。

11. 一定要给高度才会生效，一般是动态获取里面的元素或列表高度再赋值给。

map

注意事项

• 小程序和app-vue中， 组件是由引擎创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。在上绘制内容，可使用组件自带的marker、controls等属性，也可以使用组件。App端还可以使用plus.nativeObj.view 或 subNVue 绘制原生内容，参考。另外App端nvue文件不存在层级问题。从微信基础库2.8.3开始，支持map组件的同层渲染，不再有层级问题。
• App端nvue文件的map和小程序拉齐度更高。vue里的map则与plus.map功能一致，和小程序的地图略有差异。App端使用map推荐使用nvue。
• App端使用到本地图像的话，打包前需要设置资源为释放模式，在manifest文件内app-plus新增runmode节点，设置值为liberate。
• 在涉及层级问题的小程序中和app-vue中，请勿在 scroll-view、swiper、picker-view、movable-view 中使用 组件。
• 小程序和 app-vue 中，css 动画对 组件无效。
• map 组件使用的经纬度是国测局坐标，调用 uni.getLocation 接口需要指定 type 为 gcj02。
• 组件在不同平台的底层引擎是不同的：H5、微信小程序为腾讯地图；App、支付宝小程序为高德地图；百度小程序、快应用为百度地图。app-vue也可以使用百度地图，在manifest中配置，打包后生效，但app-nvue只支持高德地图。另外选择地图、查看地图位置的API也仅支持高德地图。App端如无特殊必要，建议使用高德地图。
• map 组件默认的api是参考微信小程序的，如需要使用plus.map，可以通过$getAppMap获取原生地图对象，详见。注意nvue的map组件不是plus.map对象，无法使用$getAppMap
• H5 端获取定位信息，需要部署在 https 服务上，本地预览（localhost）仍然可以使用 http 协议。
• 无GPS模块或GPS无信号的 PC 设备使用 Chrome 浏览器的时候，位置信息是连接谷歌服务器获取的，国内用户可能获取位置信息失败。
• App 端使用地图组件需要向高德或百度等三方服务商申请SDK资质，获取AppKey，打包时需要在manifest文件中勾选相应模块，在SDK配置中填写Appkey。注意申请包名和打包时的包名需匹配一致，证书信息匹配。在manifest可视化界面有详细申请指南。
• H5 端使用地图和定位相关需要在腾讯地图开放平台申请密钥，填写在 manifest.json 中。
• ios nvue Color 不支持 ARGB 十六进制，使用 rgba(r,g,b,a) 代替