前端面试问题

目录

vuex的工作流程

redux的工作流程

输入url到页面展示

对原型的理解

vue中的keep-alive

setState是同步还是异步

 说一下事件轮询

$nextTick的作用和使用场景

vue的响应式基本原理

vue路由传参 - params和query的区别

重绘和重排（回流）区别、如何避免

说一下promise

说一下webpack

js继承的方式

mobx

跨域

---

vuex的工作流程

只能通过mutations来进行修改state的数据状态

如果我们是直接修改state中的值，那么我们可以使用this.$store.commit("方法名",传递的值)，或者是使用mapMutations函数来暴露出在mutations中定义的方法名，然后在事件中进行调用，...mapMutations(["方法名"])；如果是一些异步请求，我们可以使用this.$store.dispatch("方法名")，也可以使用mapActions，在actions里面进行异步请求，然后在actions中commit一个mutations方法进行传值，进而对state的数据进行修改。

mutations和actions的区别：

1. state数据状态只能通过mutations进行修改
2. actions内是处理异步或同步的操作，mutations只能执行同步代码
3. 在页面中通过dispatch一个action的操作，在actions中commit一个mutations类型和要传递的值，mutations根据类型进行函数的执行，从而操作state的状态

getters的作用：类似组件中的computed，对数据进行加工处理，对原数据再加工，计算后的结果

redux的工作流程

1. view在redux中会派发action方法
2. action通过store的dispatch方法会派发给store
3. store接收action，连同之前的state一起传递给reducer
4. reducer返回新的数据给store
5. store去改变自己的state

输入url到页面展示

1. 浏览器解析域名得到服务器IP地址：浏览器会首先从缓存中查找是否存在域名，如果存在就直接取出对应的IP地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的IP发给客户端，然后访问根域名服务器，将对应的IP发送给客户端，最后访问本地域名服务器，得到最终的地址。
2. 三次握手建立TCP连接
3. 客户端发送http请求获取服务器端的静态资源
4. 服务器发送http响应报文给客户端，客户端获取到页面静态资源
5. TCP四次挥手关闭客户端和服务器的连接
6. 浏览器解析文档资源并渲染页面

对原型的理解

每一个函数被创建的时候，会创建一个prototype属性，这个属性是一个对象，这个对象就是构造函数的原型。不仅可以在构造函数中创建属性和方法，也可以将属性和方法直接赋值给他们的原型。在原型对象上面定义的属性和方法可以被实例共享。

实例对象可以通过__proto__属性来访问构造函数的原型对象，因为实例的__proto__属性指向的是构造函数的原型对象，所以：实例.__proto__ === 构造函数.prototype

prototype属性是只有函数拥有的，__proto__属性是只有对象拥有的；

构造函数可以通过prototype访问原型对象，那么原型对象又可以通过constructor访问构造函数，构造函数.prototype.constructor === 构造函数

那么实例对象中不仅包含__proto__属性，还有一个constructor属性，因为实例对象是被构造函数new出来的，所以实例对象的constructor指向的是构造函数

使用场景：原型是一个公共区域，当需要多个实例对象使用到同一个属性或方法时，直接使用原型进行添加，如果某一些实例对象不需要使用，可以通过向自身对象添加响应的属性或方法，使用时就会优先使用到自身的属性或方法。当访问对象的某个属性时，如果这个对象中没有此属性，那么会通过__proto__属性到他的原型中查找，如果原型中没有，那么会继续向原型的原型中查找，以此类推，不存在就返回null

vue中的keep-alive

keep-alive：保持活跃，会缓存不活动的组件的状态

作用：避免多次重复渲染降低性能，用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

1. include -- 字符串或正则表达式，只有名称匹配的组件会被缓存
2. exclude -- 字符串或正则表达式，任何名称匹配的组件都不会被缓存
3. max -- 数字，最多可以缓存多少组件实例
4. 结合Router，缓存部分页面，$route.meta.keepAlive选项
5. 生命周期函数：actived、deactivated

注意：

1. 只有组件被keep-alive包裹时，这两个生命周期函数才会被调用，正常组件使用时，是不会被调用的
2. 如果进入页面时需要获取最新数据，就在activated阶段获取数据，承担原来的created钩子函数中获取数据的任务

setState是同步还是异步

同步环境为异步，异步环境为同步

setState本身不是异步的，这是因为react的性能优化机制体现为异步

如何立马获取到修改的值：

1. 使用setState回调
2. 在setTimeout中使用setState
3. 在原生事件中使用setState
4. 

 说一下事件轮询

1. js是单线程机制，从上往下执行，首先主线程读取js代码，此时是同步的环境
2. 当主线程检测到异步操作，就会交给其他异步线程处理，然后继续执行主线程的任务
3. 同步任务执行完之后，判断异步任务的类型，异步任务可分为宏任务和微任务，setTimeout、setInterval等属于宏任务，promise的then回调函数，nextTick等属于微任务，不同的任务进入不同的队列，等待主线程空闲时候调用
4. 当主线程的同步任务执行完之后，开始执行微任务队列里面的所有微任务，执行完微任务，就执行宏任务队列里面的所有宏任务
5. 执行完成之后，主线程开始询问任务队列里面是否还有等待的任务，如果有则进入主线程继续执行

$nextTick的作用和使用场景

作用：主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化 

使用场景：

有时需要根据数据动态的为页面某些dom元素添加事件，这就要求在dom元素渲染完毕时去设置，但是crated与mounted钩子函数执行时一般dom并没有渲染完毕，所以就会出现获取不到dom元素，添加不了事件的问题，这就需要用到nextTick来处理

数据改变后获取焦点

vue的响应式基本原理

vue路由传参 - params和query的区别

1. params只能用name来引入路由，query用path来引入
2. params类似于post，query类似于get，简单点说，params在浏览器地址栏中不显示参数，query显示，所以params传值相对安全一些
3. 取值用法分别是：this.$route.params.xxx和this.$route.query.xxx
4. params传值一刷新就没了，query传值刷新之后还存在

重绘和重排（回流）区别、如何避免

重绘：当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或者背景变了，就会重新渲染页面，这就是重绘。

重排（回流）：当增加或者删除可见的dom元素，或者给元素修改宽高时，会改变布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。

引起重排（回流）的操作：

1. 添加或者删除可见的dom元素（不可见元素不会触发重排（回流））
2. 元素尺寸或位置发生改变
3. 元素内容变化，比如文字数量或图片大小
4. 浏览器窗口大小发生改变
5. css伪类的激活（例如  :hover，从而改变了元素的布局）

总结：重绘不一定会引起dom结构和页面布局的变化，只是样式的变化，重排（回流）则是会引起dom结构和页面布局的变化，所以有重排（回流）就一定有重绘。

如何避免（减少）重排：

• 如果需要设置动画效果，最好将元素脱离正常的文档流
• 避免频繁的操作样式
• 避免频繁操作DOM
• 先把需要操作的元素设置为不可见，display：none，操作结束后再把他显示出来
• 减少使用table布局

说一下promise

promise是异步编程的一种解决方案，解决了回调地狱的问题

有三种状态：pending、resolved、rejected

promise是构造函数，new一个实例对象，接收一个函数作为参数，这个函数有两个参数，分别为resolve和reject，实例创建后用then制定成功或失败的回调函数，也可以用catch捕获失败；一旦promise执行，无法中途取消。

promise原型上有两个方法：then、catch

then：接收两个回调函数作为参数，当promise调用resolve函数，那么就执行then的第一个回调函数，调用reject函数时，就执行then的第二个回调函数或者catch方法；

catch：相当于then的第二个参数，调用reject函数时执行catch方法。

all：接收一个数组，数组的每一项都是promise对象，当数组中的所有promise对象状态都达到resolved时，all方法的状态就会变成resolved，如果有一个状态为rejected，那么all方法的状态就会是rejected。

race：接收一个数组，数组的每一项都是promise对象，当第一个执行完的promise对象状态为resolved，那么race方法的状态为resolved；如果是rejected，那么race方法的状态也为rejected。

finally：不管promise最后状态如何，都会执行finally方法。

说一下webpack

webpack可以看作是模块打包机，他做的事情是，分析你的项目结构，找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言（sass，ts等），并将其转换和打包为合适的格式供浏览器使用。

js继承的方式

1. 原型链继承
2. 构造函数继承
3. 组合继承

mobx

• @observable：定义state
• @computed：定义一个方法，当依赖的state发生改变时，自动重新计算，自动的将最新的结果渲染至调用的地方
• @action：定义操作state的方法

跨域

同源策略：同协议，同域名，同端口

cors解决跨域问题，服务器返回响应头，前端无需任何处理，支持所有请求方式

jsonp解决跨域问题，