尚品汇VUE项目实战相关面试题总结

1.v-show与v-if区别?

v-show:通过样式display控制
v-if：通过操作DOM元素进行操作

2.开发项目的时候，优化手段有哪些?

1:v-show|v-if(首页|搜索底部是有Footer组件，而登录注册是没有Footer组件
Footer组件显示|隐藏，选择v-show|v-if)
2:按需加载(对于loadsh插件,element，它里面封装的函数功能很多)
3.函数防抖与节流
4.请求性能优化：

• 请求数据优化
  发一个请求，需要向服务器携带参数：带100个参数 带1参数 【消耗宽带】
  对于给服务器携带的参数：如果数值为undefind，向服务器发请求的时候，参数步携带给服务器的
• 请求的次数优化:
  1.TypeNav三级联动性能优化?
  - 项目：home切换到search或者search切换到home，你会发现一件事情，组件在频繁的向服务器发请求获取三级联动的数据进行展示。
  - 项目中如果频繁的向服务器发请求，很好性能的，因此咱们需要进行优化。
  2.为什么会频繁的向服务器发请求获取三级联动的数据那?
  - 三级联动的数据是全局组件，使用的组件中进行跳转，因为路由跳转的时候，组件会进行销毁的【home组件的created：在向vuex派发action，因此频繁的获取三级联动的数据】
  - 只需要发一次请求，获取到三级联动的数据即可，不需要多次。
  - 最终解决方案：在App中的moutend只会执行一次

APP文件
  mounted(){
   
   
    // TypeNav向仓库派发行为 获取数据
    // 放到这里，只需进行一次请求，Home小仓库获得数据后，全局组件TypeNav都会存储到Home小仓库获得的这个数据
    this.$store.dispatch("categroylist");
  },

main虽然也是执行一次，但是它不是组件，没有this，组件才有$store属性

3.路由传递参数先关面试题

 1:路由传递参数（对象写法）path是否可以结合params参数一起使用?
 不可以：不能这样书写，程序会崩掉
 2:如何指定params参数可传可不传?
 3:params参数可以传递也可以不传递，但是如果传递是空串，如何解决？
 4:如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
 5: 路由组件能不能传递props数据?

4.axios二次封装

好处:

• api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

// 这个文件进行统一的API管理
// 引入axios
import requests from './request'
// 引入mockAjax
import mockrequest from './mockAjax'


// 三级联动的接口
// 这里设置一个函数对外暴露，外面若需要发起三级联动的数据请求调用即可 记住要给函数返回，不然无返回值默认undefined
export const reqCategoryList = ()=>{
   
   
    // 发请求成功返回的是promise对象  直接使用封装好的axios
    return requests({
   
   
        url:'/product/getBaseCategoryList',
        method:'get'
    })

}

// 获取首页banner（首页轮播图的数据）
export const reqGetBannerList = ()=>mockrequest.get('/banner')
    
//获取floor的数据
export const reqGetFloor = ()=>mockrequest.get('/floor')

// 获取search的数据   这个函数需要不需要外部传递的参数？要给服务器带参进行params给服务器传递参数 调这个函数得有相应的参数     错错错需要接收home页传递过来的params数据和query数据/api/list
// 当前这个接口。给服务器发请求的时候，至少得是一个空对象
export const reqGetSearchInfo = (params)=>requests({
   
   
    url:'/list',
    method:'post',
    data:params
})

• 请求拦截器和响应拦截器
• nprogress进度条

// 这里进行axios的二次封装
// 主要想用请求拦截器和响应拦截器
import axios from 'axios'
// 引入进度条 start开始 end结束
import nprogress from 'nprogress'
// 引入进度条样式
import "nprogress/nprogress.css"

// 1.利用axios的create方法创建一个axios实例
// 2.request其实就是axios，只不过我们又进行了配置和封装
const requests = axios.create({
   
   
    // create里面可以传配置对象

    // 配置对象
    // 基础路径：baseURL就是给每个请求的路径上自动加上所配置的，就不用自己再去书写
    baseURL: '/api',
    // 请求超时的时间
    timeout: 5000
})

// 3.设置请求拦截器，在发请求之前，请求拦截器可以监测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
   
   
    // config其实是一个配置对象，里面有属性headers请求头

    // 进度条开始
    nprogress.start()
    return config
}