场景题汇总

ゝ一世哀愁。 2022-09-08 00:16 137阅读 0赞

1.  axios 拦截器使用场景：
    
    1.  **请求拦截器：** 在每一个请求路径中都需要添加`“http:localhost:8080/”`，我们可以在设置axios 的默认请求路径。
    2.  **请求拦截器：** 在访问需要认证身份的后端接口时需要在请求头中添加 token，我们可以在 axios 的前置拦截去统一处理。
    3.  **响应拦截器：** 如果登录失败，我们是需要弹窗显示错误的，比如验证码错误，用户名或密码不正确等。不仅仅是这个登录接口，所有的接口调用都会有这个情况，所以我们可以做个 axios 的后置拦截，对返回的结果进行分析，如果是异常就直接弹窗显示错误，这样我们就省得每个接口都写一遍了。
    
    这里说一下 token，一般是在登录完成之后，将用户的 token 通过 localStorage 或者 cookie 存在本地，然后用户每次在进入页面的时候，会首先从本地存储中读取 token，如果 token 存在说明用户已经登陆过，则更新 vuex 中的 token 状态。然后，在每次请求接口的时候，都会在请求的 header 中携带 token，服务器就可以根据你携带的 token 来判断你的登录是否过期，如果没有携带，则说明没有登录过。
2.  使用 axios 拦截器的方法：
    
    1.  在 src 目录下创建 axios.js 文件。
    2.  在 main.js 中删除原来导入的`import axios from 'axios'`，因为在 axios 中已经引入。
    
        import axios from './axios'
        Vue.prototype.$axios = axios // 全局使用axios库
3.  解决 Vue 项目中使用 better-scroll 在下拉加载页面后出现滑动卡顿的问题。
    
    场景：在 vue 项目中使用 better-scroll 解决原生滑动不够顺滑的问题，但在下拉加载更多数据时，出现无法下拉，滑动卡顿，但是稍微等一会，就又可以正常下拉滑动。
    
    原因分析：
    
    出现该现象的原因是由于 better-scroll 中的一个属性：scrollerHeight。
    
    1.  better-scroll 在决定有多少区域可以滚动时，是根据 scrollerHeight 属性决定的。
    2.  scrollerHeight 属性是根据放在 better-scroll 中子组件的高度决定的。
    3.  但在刚下拉加载时，由于图片加载速度较慢，所以 scrollerHeight 计算的结果是少于实际高度的，就会导致拉到一定高度无法下拉的情况。但是等待一会，图片加载完毕，scrollerHeight 变成实际高度，就又可以正常滚动。
    
    解决方案：
    
    解决方法就是监听每一张图片的加载。然后在每张图片加载完成手动刷新 scrollerHeight 的数值。
    
     *  vue中使用 @load=“方法” 实现对图片监听。
     *  再调用 better-scroll 中的 refresh()。
    
    [博客地址][Link 1]
4.  **小程序单页面跳转最大的层数,达到后怎么处理的?**
    
    最大页面10个，到达10层了只能由 `redirectTo`不保存当前页跳转。
5.  Vue-router 跳转刷新页面 Params 参数丢失问题
    
    `vue-router`的跳转传参方式分为 query 和 params俩种。
    
    1.  query传参数，相当于拼接在 url 后面，这种方式不会丢失参数，但是数据量大的话（比如传递对象），url 就会变得太长而且不隐密。
    2.  params 传参数，不在 url 中显示，但是刷新页面的时候无法避免丢失。
    
    解决：
    
    1.  使用`this.$router.push({name:"模块名称", query:{// 各参数}})`方式传参。
        
        缺点：参数值都拼接在 url 上，url 会很长，同时都可以被看到。
    2.  `this.$router.push({name:"模块名称", params:{// 各参数}})`路由文件设置的时候把参数拼接到 url 里。
        
            // url
            http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101
        
        确定：同上。
    3.  1 和 2 结合使用：`this.$router.push({name:"模块名称", params:{//各参数},query:{//各参数}})`。
    4.  用 localStorage 存储。
        
            url: http://localhost:8081/#/paamsPassingByRouter/paramsMode/z3
            // 可以与 params 和 query 方式配合使用，可以暴露的参数显示在 url 上，同时刷新参数也不会丢失。
            销毁页面的时候把 localStorage 存储的内容请求。
    
    [博客地址][Link 2]
6.  端给你的接口，你只需要该接口里数据的一部分，其他数据不要，让你批量性的实现默认处理？
    
    可以将数据进行过滤，也可以使用 computed。
    
    vue 2.0 之后`limitBy`被计算属性代替, 官方的例子：
    
        <p v-for="item in filteredItems">{ {  item }}</p>
        
        
        computed: { 
          filteredItems: function () { 
            return this.items.slice(0, 10)
          }
        }
7.  vuex 的使用场景
8.  为什么 vue-router 使用 next() 跳转到指定路径时会无限循环？
    
    问题：我不太明白为什么会死循环，我在 home 页面也没有写任何钩子函数来跳到 result 页面啊，我也没有写全局的 beforeEach 钩子函数。
    
    死循环代码：
    
        // 下面的写法会死循环
        beforeRouteLeave (to, from, next) { 
            console.log('离开路路由')
           next('/home')
        }
    
    可用的代码：
    
        // 我在路由为 /path 的页面这样写
        beforeRouteLeave (to, from, next) { 
           console.log('离开路由')
           if(to.fullPath==='/home'){ 
             next();
           }else{ 
             next('/home')
        }
9.  Vue 路由拦截(对某些页面需要登录才能访问)
    
    需求：项目中发现未登录也能进入主页，这样是不行的。需要在用户进入主页的时候，判断是否有登录。没有，返回登录页面，有，则可以浏览任意页面。
    
    路由拦截：
    
    1.  加上meta。如：`meta:{requireAuth:true}`
    2.  `router.beforeEach`函数加上判断即可。
    
    [博客地址][Link 3]
10. Vue.nextTick 原理是什么(辉鸿)？
    
    **为啥使用 Vue.nextTick？ 作用：**`Vue.nextTick`用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回`promise`对象。
    
    **原理：** 因为更新是异步的，有时候外界可能会在更新数据之后想拿到最新的 dom 元素进行操作，Vue 为了让用户达到统一的效果，内部使用了 nextTick，也要让用户使用 nextTick，vue2 中 nextTick 做了兼容：
    
    1.  如果 Promise 支持，就用 Promise.resolve().then() 来处理，如果不支持，就用mutationObserve来处理。
    2.  如果还不支持，就用 setImmediate 来处理。
    3.  最后还不支持，就用 setTimeout，vue3 中 nextTick 放弃兼容，直接使用Promise.resolve().then()，nextTick 内部也是做了防抖功能的，防止用户多次调用 nextTick。
    
    **nextTick 源码重点(辉鸿):**
    
    1.  在主线程中，无论执行多少个 nextTick，都只会开启一个 then 微任务。
        
        注意：也就是说多个nextTick共用一个then微任务
    2.  Vue 介绍自己的视图更新是异步的。
        
        如果响应式属性发生变化，Vue 使用 nextTick 更新视图，更新DOM的时间点是在then微任务中。
    3.  Vue 只所以敢说 nextTick 的回调函数一定会在 DOM 更新之后执行的原因：
        
        就是因为更新 DOM 的操作，就是第一个 nextTick，后续所有 nextTick 都会在这个 nextTick 之后执行。
11. nextTick 使用场景：
    
    1.  点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。
        
            showsou(){ 
              this.showit = true //修改 v-show
              document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
            }
    2.  修改为：
        
            showsou(){ 
              this.showit = true
              this.$nextTick(function () { 
                // DOM 更新了
                document.getElementById("keywords").focus()
              })
            }
12. 编程式路由跳转到当前路由(参数不变)，多次执行会抛出 NavigationDuplicated 的警告错误
    
    原因：vue-router 3.1.0 之后，引入了 promise 的语法。如果没有通过参数指定成功的回调或者失败的回调就返回一个 promise，且内部会判断如果要跳转的路径和参数都没有，会抛出一个失败的 promise。
    
    解决：
    
    1.  在跳转时指定成功或失败的回调函数，或者 catch 处理错误。
        
        这个解决办法不好，因为不能一劳永逸，后期如果用到了 push/replace 还要继续都得写。
    2.  修改 Vue 原型上的 push 和 replace 方法。(优秀)
13. 闭包使用场景：
    
    1.  删除某一条数据，通过 ID 或 index去删除的时候，会使用到闭包。
    2.  发送 Ajax 请求成功或失败的回调。
    3.  setTimeout 的延时回调。
14. 节流的使用场景：
    
    1.  滚动加载更多。
    2.  搜索框搜索的联想功能。
    3.  高频点击。
    4.  表单重复提交。
15. 防抖的使用场景：
    
    1.  搜索框搜索输入，并在输入完以后自动搜索。
    2.  手机号，邮箱验证输入检测。
    3.  窗口大小 resize 变化后，再重新渲染。

[Link 1]: https://blog.csdn.net/weixin_43402358/article/details/119272273
[Link 2]: https://blog.csdn.net/qq_33456552/article/details/105118120
[Link 3]: https://www.cnblogs.com/zhengzemin/p/vueRouter_lanjie.html