VUE2-拓展（主了解）

经典面试题 — 路由篇

1. 编程式导航push与replace区别?

   • 能记录历史记录：push
   • 不能记住历史记录：replace

2. 路由组件与非路由组件的区别

   • 文件放置位置不同
   • 路由组件一般需要在router文件夹中进行注册，非路由组件在使用的时候，一般但是以标签的形式使用
   • 注册完路由，不管是路由组件还是非路由组件身上都有$route、$router属性
     • $route: 一般获取路由信息(路径、query、params等)
     • $router: 一般进行编程式导航进行路由跳转(push|replace)

3. 路由传递参数（对象写法）path是否可以结合params参数一起使用？

   • 不可以,路由传参的时候，对象的写法可以是name、path形式，但是path这中写法不能与params参数一起使用

4. 如何指定params参数可传可不传？

   • 在配置路由的文件下，给对应路由传参占位的地方后面加一个 ?

5. params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？

   • 使用undefined解决：params参数: ‘’ || undefined 即可

6. 路由组件能不能传递props数据

   • 可以，有三种写法：(路由组件只能传递props属性，并且是params参数)
     • 布尔值写法
     • 对象写法: 额外的给路由组件传递一些props
     • 函数写法（常见）：可以params参数、query参数，通过props传递给路由组件

经典面试题 — 其它

1. 函数防抖与节流

   • 正常：
     • 事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）
   • 防抖：
     • 前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次
   • 节流：
     • 在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
   • 需要把防抖与节流的原理，通过JS实现(闭包 + 延迟器)
   • 按需加载引用loadsh插件

2. GET与POST

   • 相同点：都是HTTP协议。
   • 不同点:
     • GET请求携带参数是有上限的且相对而言不安全，post请求携带的参数是没有’上限的’但安全

3. token面试题:项目当中token过期、失效如何处理？

   • 清除本地token（本地存储），让用户回到登录页，获取最新的token

4. 本地存储与会话存储区别？

   • 本地存储：持久化的5m；
   • 会话存储：并非持久, 会话结束就消失

5. v-for 与 v-if 的优先级？

   • vue 2 中，在同一个元素上使用，v-for 的优先级高于 v-if。比较浪费资源
   • vue 3 中，v-if 的优先级总是高于 v-for。所以如果v-if变量不存在会导致异常

6. 项目的性能优化手段

   • v-if|v-show：尽可能采用v-show
   • 按需引入：如lodash、elementUI
   • 防抖与节流
   • 路由懒加载

其它知识

mock

• mock官方地址
• 模拟的数据一般：对象、数组
• 安装：

  npm install mockjs

• 在src文件夹下创建mock文件夹
• 准备模拟的数据
• 注：mock数据需要的图片要放置于public文件夹中！
• 在mock文件夹中创建一个server.js文件

  // 引入
  const Mock = require('mockjs')
  
  // 使用
  const data = Mock.mock({'list':[{}]})

• 回到入口文件，引入serve.js
• 之后写一个请求用来模拟API

分页器业务

• 前端三大件:轮播图、分页、日历。这属于前端开发常见三种业务
• 分页器封装业务分析:
• 需知：总数据条数，一页最多展示多少条数据，当前页数，连续页码数(一般5、7、9,案例用5)
  • 当前页数为1， 则展示连续页码数1，2，3，4，5
  • 当前页数为2， 则展示连续页码数1，2，3，4，5
  • 当前页数为最后一页n，则展示n-4，n-3，n-2，n-1，n
  • 当前页数为最后一页n-1，则展示n-4，n-3，n-2，n-1，n
  • 当前页数为除以上数字m，则展示m-2，m-1，m，m+1,m+2

身份凭证

• UUID生成的临时身份
• 用户（注册与登录）token(正式身份)

懒加载

• 路由懒加载: 当用户访问的时候，加载对应组件进行展示
• 图片懒加载: vue-lazyload

框架 + 组件库的选择

• react框架:
  • UI组件库antd(蚂蚁金服旗下PC端UI组件库)
  • antd-mobile(蚂蚁金服旗下的移动端UI组件库)
• Vue框架:
  • element-UI(饿了么旗下的UI组件库，官方承认的PC组件库插件)
  • vant(Vue官方提供移动端UI组件库)

插件

• qrcode插件：展示二维码
  • 通过qrCode.toDataUrl方法，将字符串转换为加密的在线二维码链接，通过图片进行展示
• swiper.js：处理滚动屏
  • 安装：

    swiper：cnpm install --save swiper@5

  • 引入：

    import Swiper from 'swiper'

  • 使用：

    v-for="(carousel,index) in 轮播图请求返回的数据" :key="carousel.id"

  • 注：引入swiper的实例，！！！在引入前，页面中的结构必须要有不然看不见
  • 解决方案：watch(数据监听) –> 监听已有数据的变化 + nextTick(在图片列表从初始值变为接收的数据时，循环结束之后，执行延迟回调)
  • 分析：
    • mounted：代表组件挂载完毕，正常说组件结构DOM已经全有了。但是不包括AJAX，获取动态数据
    • v-for,在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）
    • mounted挂载后–>store.dispatch派发axios，通知vuex发送数据–>发送请求提交mutations修改state–>state有了数据组件才能获得相应的数据(要延时，所以不能直接写swiper的实例)

moment.js：处理时间

nprogress.js： 处理进度条

vee-validate插件：Vue官方提供的一个表单验证的插件

• 安装：

  cnpm i vee-validate@2 --save

• 引入：在main.js文件

  import VeeValidate from 'vee-validate'
  import zh_CN from 'vee-validate/dist/locale/zh_CN'
  Vue.use(VeeValidate)

• 提示信息

  VeeValidate.Validator.localize('zh_CN', {
  	messages: {
  		...zh_CN.messages,
  		is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
  	},
  	attributes: { // 给校验的 field 属性名映射中文名称
  		phone: '手机号',
  		code: '验证码',
  		password:'密码',
  		password1:'确认密码',
  		isCheck:'协议'
  	}
  })

• 在表单标签上添加
  • 绑定v-model=”attributes的字段”
  • v-validate=”{ required: true, regex: 验证规则 }”
• 页面使用：errors.has(“字段”)来使用…
• 代码等待全部验证：

  const success = await this.$validator.validateAll()

• 自定义校验规则：定义协议必须打勾同意

  VeeValidate.Validator.extend('agree', {
  	validate: value => {
  		return value
  	},
  	getMessage: field => field + '必须同意'
  })