目录
vuex的工作流程
只能通过mutations来进行修改state的数据状态
如果我们是直接修改state中的值,那么我们可以使用this.$store.commit("方法名",传递的值),或者是使用mapMutations函数来暴露出在mutations中定义的方法名,然后在事件中进行调用,...mapMutations(["方法名"]);如果是一些异步请求,我们可以使用this.$store.dispatch("方法名"),也可以使用mapActions,在actions里面进行异步请求,然后在actions中commit一个mutations方法进行传值,进而对state的数据进行修改。
mutations和actions的区别:
- state数据状态只能通过mutations进行修改
- actions内是处理异步或同步的操作,mutations只能执行同步代码
- 在页面中通过dispatch一个action的操作,在actions中commit一个mutations类型和要传递的值,mutations根据类型进行函数的执行,从而操作state的状态
getters的作用:类似组件中的computed,对数据进行加工处理,对原数据再加工,计算后的结果
redux的工作流程
- view在redux中会派发action方法
- action通过store的dispatch方法会派发给store
- store接收action,连同之前的state一起传递给reducer
- reducer返回新的数据给store
- store去改变自己的state
输入url到页面展示
- 浏览器解析域名得到服务器IP地址:浏览器会首先从缓存中查找是否存在域名,如果存在就直接取出对应的IP地址,如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器,将对应的IP发给客户端,然后访问根域名服务器,将对应的IP发送给客户端,最后访问本地域名服务器,得到最终的地址。
- 三次握手建立TCP连接
- 客户端发送http请求获取服务器端的静态资源
- 服务器发送http响应报文给客户端,客户端获取到页面静态资源
- TCP四次挥手关闭客户端和服务器的连接
- 浏览器解析文档资源并渲染页面
对原型的理解
每一个函数被创建的时候,会创建一个prototype属性,这个属性是一个对象,这个对象就是构造函数的原型。不仅可以在构造函数中创建属性和方法,也可以将属性和方法直接赋值给他们的原型。在原型对象上面定义的属性和方法可以被实例共享。
实例对象可以通过__proto__属性来访问构造函数的原型对象,因为实例的__proto__属性指向的是构造函数的原型对象,所以:实例.__proto__ === 构造函数.prototype
prototype属性是只有函数拥有的,__proto__属性是只有对象拥有的;
构造函数可以通过prototype访问原型对象,那么原型对象又可以通过constructor访问构造函数,构造函数.prototype.constructor === 构造函数
那么实例对象中不仅包含__proto__属性,还有一个constructor属性,因为实例对象是被构造函数new出来的,所以实例对象的constructor指向的是构造函数
使用场景:原型是一个公共区域,当需要多个实例对象使用到同一个属性或方法时,直接使用原型进行添加,如果某一些实例对象不需要使用,可以通过向自身对象添加响应的属性或方法,使用时就会优先使用到自身的属性或方法。当访问对象的某个属性时,如果这个对象中没有此属性,那么会通过__proto__属性到他的原型中查找,如果原型中没有,那么会继续向原型的原型中查找,以此类推,不存在就返回null
vue中的keep-alive
keep-alive:保持活跃,会缓存不活动的组件的状态
作用:避免多次重复渲染降低性能,用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。
- include -- 字符串或正则表达式,只有名称匹配的组件会被缓存
- exclude -- 字符串或正则表达式,任何名称匹配的组件都不会被缓存
- max -- 数字,最多可以缓存多少组件实例
- 结合Router,缓存部分页面,$route.meta.keepAlive选项
- 生命周期函数:actived、deactivated
注意:
- 只有组件被keep-alive包裹时,这两个生命周期函数才会被调用,正常组件使用时,是不会被调用的
- 如果进入页面时需要获取最新数据,就在activated阶段获取数据,承担原来的created钩子函数中获取数据的任务
setState是同步还是异步
同步环境为异步,异步环境为同步
setState本身不是异步的,这是因为react的性能优化机制体现为异步
如何立马获取到修改的值:
- 使用setState回调
- 在setTimeout中使用setState
- 在原生事件中使用setState
说一下事件轮询
- js是单线程机制,从上往下执行,首先主线程读取js代码,此时是同步的环境
- 当主线程检测到异步操作,就会交给其他异步线程处理,然后继续执行主线程的任务
- 同步任务执行完之后,判断异步任务的类型,异步任务可分为宏任务和微任务,setTimeout、setInterval等属于宏任务,promise的then回调函数,nextTick等属于微任务,不同的任务进入不同的队列,等待主线程空闲时候调用
- 当主线程的同步任务执行完之后,开始执行微任务队列里面的所有微任务,执行完微任务,就执行宏任务队列里面的所有宏任务
- 执行完成之后,主线程开始询问任务队列里面是否还有等待的任务,如果有则进入主线程继续执行
$nextTick的作用和使用场景
作用:主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化
使用场景:
有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是crated与mounted钩子函数执行时一般dom并没有渲染完毕,所以就会出现获取不到dom元素,添加不了事件的问题,这就需要用到nextTick来处理
数据改变后获取焦点
vue的响应式基本原理
vue路由传参 - params和query的区别
- params只能用name来引入路由,query用path来引入
- params类似于post,query类似于get,简单点说,params在浏览器地址栏中不显示参数,query显示,所以params传值相对安全一些
- 取值用法分别是:this.$route.params.xxx和this.$route.query.xxx
- params传值一刷新就没了,query传值刷新之后还存在
重绘和重排(回流)区别、如何避免
重绘:当给一个元素更换颜色、更换背景,虽然不会影响页面布局,但是颜色或者背景变了,就会重新渲染页面,这就是重绘。
重排(回流):当增加或者删除可见的dom元素,或者给元素修改宽高时,会改变布局,那么就会重新构造dom树然后再次进行渲染,这就是回流。
引起重排(回流)的操作:
- 添加或者删除可见的dom元素(不可见元素不会触发重排(回流))
- 元素尺寸或位置发生改变
- 元素内容变化,比如文字数量或图片大小
- 浏览器窗口大小发生改变
- 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继承的方式
- 原型链继承
- 构造函数继承
- 组合继承
mobx
- @observable:定义state
- @computed:定义一个方法,当依赖的state发生改变时,自动重新计算,自动的将最新的结果渲染至调用的地方
- @action:定义操作state的方法
跨域
同源策略:同协议,同域名,同端口
cors解决跨域问题,服务器返回响应头,前端无需任何处理,支持所有请求方式
jsonp解决跨域问题,