对vue的钩子函数的应用

 

前言

了解vue的导航钩子对你构建项目很有帮助，很多开发中遇到的问题也会迎刃而解~

 

针对钩子函数的一些应用

1.组件复用时

beforeRouteUpdate

beforeRouteEnter(to, from, next) {
    // 在路由独享守卫后调用 不！能！获取组件实例 `this`，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 `this`
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
},
beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
}

 

2.离开组件前进行保存操作

beforeRouteLeave：

导航离开该组件的对应路由时调用，我们用它来禁止用户离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。

beforeRouteLeave (to, from , next) {
 if (文章保存) {
     next(); // 允许离开或者可以跳到别的路由 上面讲过了
 } else {
     next(false); // 取消离开
 }
}

 

3.进入组件前登录验证

注意：如果你编写的登陆验证，出现 跳转死循环，页面永远空白 问题，你可能是因为犯了下面这个错误：

router.beforeEach((to, from, next) => {
 if(已登录){
  next()
 }else{
  next({ name: 'login' }); 
 }
});

看逻辑貌似是对的，但是当我们跳转到login之后，因为此时还是未登录状态，所以会一直跳转到login然后死循环，页面一直是空白的，所以：我们需要把判断条件稍微改一下。

if(已登录 || to.name === 'login'){ 
    next();
}
// 登录，或者将要前往login页面的时候，就允许进入路由

 

4.缓存组件

1）缓存组件有以下特性：

① 在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

deactivated：组件被停用(离开路由)时调用

 

2）缓存组件的使用方式：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
 
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>
 
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

但更多场景中，我们会使用keep-alive来缓存路由：

<keep-alive include='a'>
 <router-view></router-view>
</keep-alive>

 

3）匹配规则：

1、首先匹配组件的name选项，如果name选项不可用。

2、则匹配它的局部注册名称。 (父组件 components 选项的键值)

3、匿名组件，不可匹配。

比如路由组件没有name选项，并且没有注册的组件名。

4、只能匹配当前被包裹的组件，不能匹配更下面嵌套的子组件。

比如用在路由上，只能匹配路由组件的name选项，不能匹配路由组件里面的嵌套组件的name选项。

5、文档：<keep-alive>不会在函数式组件中正常工作，因为它们没有缓存实例。

6、exclude的优先级大于include

也就是说：当include和exclude同时存在时，exclude生效，include不生效。

例如下面的例子中，只有a不被缓存

<keep-alive include="a,b" exclude="a">
<!--只有a不被缓存-->
    <router-view></router-view>
</keep-alive>

当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。

 

触发钩子的完整顺序：

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
3. beforeEnter: 路由独享守卫
4. beforeRouteEnter: 路由组件的组件进入路由前钩子。
5. beforeResolve:路由全局解析守卫
6. afterEach:路由全局后置钩子
7. beforeCreate:组件生命周期，不能访问this。
8. created:组件生命周期，可以访问this，不能访问dom。
9. beforeMount:组件生命周期
10. deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
11. mounted:访问/操作dom。
12. activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
13. 执行beforeRouteEnter回调函数next。

 离开缓存组件的时候，beforeDestroy和destroyed并不会触发，可以使用deactivated离开缓存组件的钩子来代替。

 

结束

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~