经典面试题 — 路由篇
编程式导航push与replace区别?
- 能记录历史记录：push
- 不能记住历史记录：replace
路由组件与非路由组件的区别
- 文件放置位置不同
- 路由组件一般需要在router文件夹中进行注册，非路由组件在使用的时候，一般但是以标签的形式使用
- 注册完路由，不管是路由组件还是非路由组件身上都有$route、$router属性
- $route:一般获取路由信息【路径、query、params。。。】
- $router:一般进行编程式导航进行路由跳转【push|replace】
路由传递参数（对象写法）path是否可以结合params参数一起使用？
- 不可以,路由传参的时候，对象的写法可以是name、path形式，但是path这中写法不能与params参数一起使用
如何指定params参数可传可不传？
- 在配置路由的文件下，给对应路由传参占位的地方后面加一个
?
- 在配置路由的文件下，给对应路由传参占位的地方后面加一个
params参数可以传递也可以不传递，但是如果传递的是空串，如何解决？
- 使用undefined解决：params参数: ‘’ || undefined 即可
路由组件能不能传递props数据
- 可以，有三种写法：(路由组件只能传递props属性，并且是params参数)
- 布尔值写法
- 对象写法:额外的给路由组件传递一些props
- 函数写法（常见）：可以params参数、query参数，通过props传递给路由组件
- 可以，有三种写法：(路由组件只能传递props属性，并且是params参数)
经典面试题 — 其它
函数防抖与节流
- 正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）
- 防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次
- 节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
- 需要把防抖与节流的原理，通过JS实现【闭包 + 延迟器】
- 按需加载引用loadsh插件
GET与POST
- 相同点：都是HTTP协议。
- 不同点:
- GET请求携带参数是有上限的且相对而言不安全，post请求携带的参数是没有’上限的’但安全
token面试题:项目当中token过期、失效如何处理？
- 清除本地token（本地存储），让用户回到登录页，获取最新的token
经典面试题：v-for与v-if优先级？ v-for优先级更高
本地存储与会话存储区别？
- 本地存储：持久化的5m；
- 会话存储：并非持久–会话结束就消失
项目的性能优化手段
- 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组件库】
- react框架:
插件
- 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的实例)
- qrcode插件：展示二维码
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)
- 提示信息
1
2
3
4
5
6
7
8
9
10
11
12
13VeeValidate.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()
- 自定义校验规则：定义协议必须打勾同意
1
2
3
4
5
6VeeValidate.Validator.extend('agree', {
validate: value => {
return value
},
getMessage: field => field + '必须同意'
})
