面试-vue篇

一、vue-router如何做历史返回提示？

获取vue-router的上一个页面是否存在或者是否是自己需要返回的地址，可以使用vue-router的的声明周期函数，有三种模式：

beforeEach(to, from, next) {
    path = from.path //path为定义的变量，不是vue的data定义的变量，当前生命周期data还未初始化
    next()
}

二、vue-router如何做登录权限

router官网中进阶部分提供了导航守卫的功能，可以通过设置全局前置守卫或者路由独享守卫来做用户登陆权限的判别。

router.beforeEach((to, from, next) => {
      //判断token值是否存在，再确定是否放行
      if（token）{
            //放行
      }else{
            //跳转登录页
      }
})

三、vue生命周期

参考 https://segmentfault.com/a/1190000013529404
vue生命周期总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

beforeCreate、cteated     //创建前、后
beforeMount、mounted      //载入前、后
beforeUpdate、updated     //更新前、后
brforeDestroy、destroyed  //销毁前、后

DOM渲染在mounted阶段完成。

简单描述每个周期具体适合哪些场景？

生命周期钩子	组件状态	最佳实践
beforeCreate	实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据	常用于初始化非响应式变量
created	实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组	常用于简单的ajax请求，页面的初始化
beforeMount	在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数
mounted	实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问	常用于获取VNode信息和操作，ajax请求
beforeupdate	响应式数据更新时调用	适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated	组件DOM已经更新，可执行依赖于DOM的操作	避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy	实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例	常用于销毁定时器、解绑全局事件、销毁插件对象deng
destroyed	实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

``` created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态 ```

四、Vue常用性能优化

1、Vue在v-for时给每项元素绑定事件需要用事件代理（使用事件代理的好处就是能够减少DOM操作，提高性能。）
2、SPA页面采用keep-alive缓存组件；
3、拆分组件；（提高复用型，增加代码的可维护性，减少不必要的渲染。）
4、合理使用路由懒加载、异步组件；
5、缓存（客户端缓存、服务器端开启gzip压缩）
6、cdn