2021-06-30面试总结

今日面试总结

1、Vuex数据状态持久化

利用vuex-persistedstate插件

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"
 
const store = new Vuex.Store({
  plugins: [createPersistedState()]
})

默认存储到localStorage，默认持久化所有state

import createPersistedState from "vuex-persistedstate"
 
const store = new Vuex.Store({
    plugins: [createPersistedState({
        storage:window.sessionStorage,  //存储到sessionStorage
        reducer(val) {
          return {
	          // 只储存state中的user
	          user: val.user
	      }
	    }
    })]
})

2、promise的方法，什么时候用promise.all 只用async不用await返回的结果什么样

• Promise.all() ：任意一个 promise 被 reject ，就会立即被 reject ，并且 reject 的是第一个抛出的错误信息，只有所有的 promise 都 resolve 时才会 resolve 所有的结果

• Promise.any() ：任意一个 promise 被 resolve ，就会立即被 resolve ，并且 resolve 的是第一个正确结果，只有所有的 promise 都 reject 时才会 reject 所有的失败信息

• promise.race()与all相反，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调

• promise.all 可以用来执行 不关心 执行顺序 只关心 回来结果的顺序的 那种需求； 只要失败一个就算失败

• 如果你关心 函数的执行顺序的话 最好使用 async和await

什么时候用promise.all，什么时候用async await 详解

只用async，不用await，返回的结果是正在pending(进行时)的promise对象

3、setTimeout和setInterval

setTimeout和setInterval的原理

4、Vue中data为函数和对象的区别

• 组件复用时所有组件实例都会共享 data，如果 data 是对象的话，就会造成一个组件修改 data 以后会影响到其他所有组件，所以需要将data 写成函数，每次用到就调用一次函数获得新的数据。

• 当我们使用 new Vue() 的方式的时候，无论我们将 data 设置为对象还是函数都是可以的，因为 new Vue() 的方式是生成一个根组件，该组件不会复用，也就不存在共享 data 的情况了

5、防止表单重复提交

1. 第一种

methods:{
    submit(){
       this.isDisable=true
       setTimeout(()=>{
           this.isDisable=false   //点击一次时隔两秒后才能再次点击
       },2000)
    }
}

2. 在axios中防止重复提交
   在进行axios提交操作的时候，把本次请求做一个标记，保存到一个数组中。等请求结束了，就从这个数组中，移除请求标记。所以，如果有两个完全一样的请求过来，那么后来的请求，就会发现在这个数组中，已经有了该标记，那么就在axios中取消本次请求。
   axios中防止重复提交