vue钩子函数

水深无声 2023-02-13 11:49 89阅读 0赞

# `vue`钩子函数 #

> 虽然文档已经很详细啦，但是总结一下加深一下理解与记忆（以官方文档为参考整理的~）

## 1. 路由导航守卫 ##

> 有时候，我们需要通过路由来进行一些操作：
> 
>  *  比如最常见的登陆权限验证，如果用户权限足够则允许让其进入导航，否则取消跳转，即返回登陆页面让用户重新登陆。
>  *  再比如在用户进入导航前需要对携带参数进行一些处理或者添加上默认的参数
>  *  再比如在用户离开某个页面前，需要对其做一些处理，在处理完毕后才允许离开该页面进入导航，否则不允许离开

我们可以在进入路由或离开路由时，需要在进入路由导航或离开路由导航过程的不同时间段做一些处理。有多种机会植入路由导航过程中：全局的，单个路由独享的或者组件级的。

### 全局前置守卫：`router.beforeEach` ###

>  *  官方解释：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫`resolve`完之前一直处于等待中（其实不太能理解全局前置守卫按照创建顺序调用？）
>  *  自己的理解：在所有导航被触发时，全局前置守卫都会被调用。可以在全局前置守卫中做一些在进入所有导航前都要做的处理。如果所有守卫未`resolve`完，导航不会被确认，将一直处于等待中。

router.beforeEach((to,from,next)=>{ 
    	//...
    })

### 全局解析守卫：`router.beforeResolve` ###

> 与`router,beforeEach`类似，区别是：在导航被确认前，同时在组件内所有守卫和异步路由组件被解析之后调用。

router.beforeResolve((to,from,next)=>{ 
    //...
    })

### 全局后置钩子：`router.afterEach` ###

> 全局后置钩子不接受`next`函数，也不会改变导航本身

router.afterEach((to,from)=>{ 
    	//...
    })

--------------------

##### 每个守卫方法接收三个参数： #####

*  `to`：`route`。即将进入的目标[路由对象][Link 1]
 *  `from`：`route`。正要离开的路由对象
 *  `next`：`Function`。调用该方法用来`Resolve`该钩子。执行效果依赖于`next`方法传入的参数（若不执行`next`是不会执行后续钩子的，也不会完成路由的跳转，`from`对应的路由组件也不会显示，此时会处于空白页显示，类似于`node`中的中间件）  
    `next()`：进入管道中的下一个钩子，如果钩子都执行完毕，则导航的状态就是被确认的  
    `next(false)`：中断当前导航。如果浏览器的`url`改变，`url`地址会重置到`from`路由对应的地址（`1-1`举例说明）  
    `next("新的路由path")/next({path:'...'})`：跳转到不同的地址。当前的导航被中断，然后进入一个新的导航。可以向 `next`方法 传递任意位置对象，且允许设置诸如 `replace: true`、`name: 'home'` 之类的选项以及任何用在 `router-link` 的 `to` `prop` 或 `router.push` 中的选项。  
    `next(error)`：如果传入的参数是一个`Error`实例，则导航会被终止且该错误会被传递给`router.onError()`注册过的回调

//1-1
    //在该例子中，无论next的参数是否为新的导航path,from都不会改变。只要遇到next(false)的情况，无论当前的导航是什么，都重置为from路由对应的地址。
    //可通过beforeEach钩子给每个路由地址都添加上test参数
    router.beforeEach((to, from, next) => { 
        console.log(to)
        console.log(from)
        if (!to.query['test']) { 
            next({ 
                path: to.path,
                query: { 
                    ...to.query,
                    test: 'test123'
                }
            })
        }
        next(false)
    })

--------------------

### 路由独享的守卫：`beforeEnter` ###

> 如果不想全局配置守卫，可以为某些路由单独配置守卫

const router = new VueRouter({ 
          routes: [
            { 
              path: '/foo',
              component: Foo,
              beforeEnter: (to, from, next) => {  
                // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
                // ...
              }
            }
          ]
        })

### 路由组件内的守卫 ###

*  `beforeRouteEnter`：

>  *  不能获取组件实例`this`，此时组件实例还未被创建。但是可以通过传入一个回调给`next`来访问组件实例
>  *  该守卫中的三个参数的作用和全局守卫相同，不同的是：该守卫可以给`next`传入一个回调，在组件被挂载后调用，用来访问组件实例。
>  *  如果不调用`next`，页面会显示空白。无法执行下一个守卫，也无法显示路由对应的组件。

<template>
      <div>index</div>
    </template>
    
    <script>
    export default { 
        beforeRouteEnter(to,from,next){ 
            console.log(123);
            next()
        }
    }
    </script>
    
    <style>
    
    </style>

*  `beforeRouteUpdate`：在路由改变，但是当前组件被复用时使用。譬如：对于一个带有动态参数的路径 `/foo/:id`，在`/foo/1`和`/foo/2`之间跳转的时候，由于会渲染同样的`foo`组件，因此组件实例会被复用，此时这个钩子会被调用（在带有动态参数的路由改变时，由于组件会被复用，故不会调用`beforeCreate`、`created`等生命周期函数）
 *  `beforeRouteLeave`：在导航离开该组件对应的路由时调用，可以访问组件实例`this`。该守卫一般用来禁止用户在还未保存修改前突然离开，可以通过`next(false)`来取消

beforeRouteLeave(to,from,next){ 
    	if(允许离开){ 
    		next();//符合离开条件，可以跳到to对应的路由或其他路由，若要去其他路由，传参即可
    	}else{ 
    		next(false)//留在from对应的路由
    	}
    }

### 完整的路由导航解析流程（仅限于路由守卫） ###

*  触发进入其他路由
 *  调用要离开的路由守卫`beforeRouteLeave`
 *  调用全局前置守卫`beforeEach`
 *  在重用组件中调用`beforeRouteUpdate`(如果当前要进入的路由是重用路由组件的话)
 *  调用路由独享守卫`beforeEnter`
 *  解析异步路由组件（Vue 允许我们以一个工厂函数的方式定义组件，这个工厂函数会异步解析我们的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染）
 *  在将要进入的路由组件中调用`beforeRouteEnter`
 *  调用全局解析守卫`beforeResolve`
 *  导航被确认
 *  调用全局后置钩子`afterEach`
 *  触发`DOM`更新`mounted`
 *  执行`beforeRouteEnter`守卫中传给`next`的回调函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]

### 2. `keep-alive` ###

>  *  在开发中，我们可能需要不对一些组件进行重复渲染，或者想要保持在离开这个组件时的内部状态。此时我们需要`keep-alive`来缓存组件内部状态，避免重新渲染。
>  *  `<keep-alive>`是一个抽象组件，它本身不会渲染一个`DOM`元素，也不会出现在父组件链中
>  *  `<kepp-alive>`可以将路由组件缓存起来，包含路由组件里面的组件。
>  *  `<keep-alive>`包裹[动态组件][Link 2]时，会缓存不活动的组件实例，而不是销毁他们。

//动态路由组件
    <keep-alive>
    	<component :is="view"></component>
    </keep-alive>
    
    <keep-alive>
    	<a v-if="a"></a>//组件a
    	<b v-else></b>//组件b
    </kepp-alive>

#### 在`keep-alive`包含的组件/路由中，会多出两个生命周期钩子：`activated`和`deactivated` ####

##### `activated` #####

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

##### 调用时机： #####

*  第一次进入缓存组件，在`mounted`后，`beforeRouteEnter`守卫传给`next`的回调函数之前调用。
    
    `beforeMounted` => 如果是从其他组件进来，调用销毁钩子`destroyed`/离开缓存钩子`deactivated` => `mounted` => `activated`进入缓存组件 => 执行`beforeRouteEnter`回调
 *  再次进入缓存组件时，不会触发`beforeCreate`、`created`、`beforeMount`、`mounted`钩子
    
    组件销毁钩子`destroyed`/离开缓存钩子`deactivated` （嵌套组件的销毁/缓存也会执行）=> `activated`进入缓存组件 => 执行`beforeRouteEnter`回调

##### `deactivated`：缓存组件被停用，即离开该组件对应的路由时调用 #####

> 如果组件被缓存，则`beforeDestroy`和`destroyed`不会被调用。在该钩子中，可以做一些想要在组件缓存时做的事情

*  如果离开当前路由，会依次触发（实际上`deactivated`可以看作`destroyed`的代替钩子，不过适用于缓存组件）：
    
    组件内的离开当前组件钩子`beforeRouteLeave` = > 全局守卫`beforeEach` =>重用组件守卫`beforeRouteUpdate`(如果不是重用组件，则不调用) => 路由独享守卫`beforeEnter`（如果是重用组件，则不会调用该钩子） => 路由组件守卫`beforeRouteEnter`（如果是重用组件，则不会调用该钩子）=> 全局解析组件`beforeResolve` => 全局后置钩子`afterEach` => `deactivated`离开缓存组件 => `activated`进入缓存组件（如果进入的是缓存组件，如果不是，则调用`beforeCreate`，再按照组件生命周期顺序依次调用其他钩子）

##### 缓存路由 #####

*  `Vue 2.1.0`之前
    
    1） 配置路由[元信息][Link 3]  
    2）创建两个`<router-view></router-view>`标签  
    3）使用`v-if`来通过路由信息判断缓存哪些路由

<template>
      <div id="app">
        <router-link to="/1">index1</router-link>//不会被缓存的组件
        <router-link to="/2">index2</router-link>//不会被缓存的组件
        <router-link to="/helloWorld">HelloWorld</router-link>//会被缓存的组件
    
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </template>
     //router配置
     new Router({ 
       routes: [
         { 
           path: '/helloWorld',
           name: 'helloWorld',
           component: Home,
           meta: { 
             keepAlive: true // 需要被缓存
           }
         },
         { 
           path: '/:id',
           name: 'index',
           component: Index,
           meta: { 
             keepAlive: false // 不需要被缓存
           }
         }
       ]
     });

*  `Vue2.1.0`版本之后

> 使用路由元信息的方式，要多创建一个`router-view`标签，并且每个路由都要配置一个元信息，过于繁琐。我们可以使用两个新增的属性：`include`和`exclude`来配合`keep-alive`来有条件地缓存组件

`include`：匹配的组件会被缓存  
`exclude`：匹配的组件不会被缓存

`include`和`exclude`支持三种方式来有条件地缓存组件：采用逗号分隔的字符串形式，正则形式，数组形式。其中正则和数组形式必须采用`v-bind`形式来使用。

###### 匹配原则 ######

*  首先匹配组件的`name`选项
 *  如果`name`选项不可用则匹配它的局部注册名称（在父组件中注册的名称）
 *  匿名组件，不可匹配（eg：路由组件没有`name`选项也没有注册的组件名）
 *  只能匹配当前被包裹的组件，不能匹配其子组件相关信息
 *  `<keep-alive>`不会在[函数式][Link 4]组件中正常工作，因为它们没有缓存实例(TODO)
 *  `exclude`的优先级大于`include`=> 当两者同时包裹同一个组件时，`exclude`生效。当组件被`exclude`包裹时，不会被缓存，则不会调用`activated`和`deactivated`

<keep-alive include="a,b" exclude="a">
       //name为a的组件不会被缓存，name为b的组件会被缓存
        <router-view></router-view>
      </keep-alive>

//逗号分隔字符串方式
        <keep-alive include="a,b">//name为a/b的组件会被缓存
          <component :is="view"></component>
        </keep-alive>
        
    //正则表达式 (使用 `v-bind`) 
        <keep-alive :include="/a|b/">//name包含a/b的组件会被缓存
          <component :is="view"></component>
        </keep-alive>
        
    // 数组 (使用 `v-bind`)
        <keep-alive :include="['a', 'b']">//name为a/b的组件会被缓存
          <component :is="view"></component>
        </keep-alive>

### 3. 生命周期钩子 ###

之前写过一篇有关生命周期钩子的博客：[传送门][Link 5]

### 4. 触发钩子的完整顺序 ###

将路由导航、`keep-alive`、组件生命周期钩子结合起来。假设从`a`组件离开，第一次进入`b`组件：

*  `beforeRouteLeave`：离开a组件对应的路由前的钩子，可以取消路由离开
 *  `beforeEach`：路由全局前置守卫，可做登陆验证等
 *  `beforeEnter`：b组件对应的路由独享守卫
 *  `b`组件中异步组件被解析
 *  `beforeRouteEnter`：进入b组件前的路由组件钩子
 *  `beforeResolve`：路由全局解析守卫
 *  导航被确认
 *  `afterEach`：路由全局后置守卫
 *  `beforeCreate`：组件生命周期，不可以访问`this`
 *  `created`：可访问`this`，不能访问`el`，`data`初始化已完成
 *  `beforeMount`：`el`初始化完成，不可访问`dom`
 *  `deactivated`：如果`a`是缓存组件，则触发该钩子以及其子组件的该钩子。如果不是则触发`a`以及其子组件的`beforeDestroy`和`destroyed`
 *  `mounted`：可访问/操作`dom`
 *  `activated`：进入缓存组件，如果要嵌套组件，也会执行嵌套组件的`activated`钩子
 *  执行`beforeRouteEnter`给`next`传入的回调函数

> 参考文章：[Vue的钩子函数\[路由导航守卫、keep-alive、生命周期钩子\]][Vue_keep-alive]

[Link 1]: https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530165831684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng==,size_16,color_FFFFFF,t_70
[Link 2]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
[Link 3]: https://router.vuejs.org/zh/guide/advanced/meta.html
[Link 4]: https://vue-loader.vuejs.org/zh/guide/functional.html
[Link 5]: https://blog.csdn.net/weixin_43314846/article/details/103086958
[Vue_keep-alive]: https://juejin.im/post/5b41bdef6fb9a04fe63765f1#heading-18