对vue的钩子函数的应用

末蓝、 2022-01-30 11:29 198阅读 0赞

# **前言** #

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

# **针对钩子函数的一些应用** #

### **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>
     
    
    <keep-alive :include="/a|b/">
     <component :is="view"></component>
    </keep-alive>
     
    
    <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">
    
        <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离开缓存组件的钩子来代替。

# **结束** #

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

![20190510130531760.jpg][]

[Link 1]: https://blog.csdn.net/chenzeze0707/article/details/90146248
[20190510130531760.jpg]: /images/20220130/9cec98f6d0744fa887eb94b7827e1e09.png