Vue钩子功能详解(路由导航守护 保活 生命周期钩子)

前言

说到Vue的钩子功能，很多人可能只停留在一些简单常用的钩子(创建、挂载)上，它们之间的区别，什么时候用，用什么钩子，还没有仔细研究过，Vue的生命周期也是面试中比较高频的考点。那么如何回答这样的问题，让人们有一种明亮的感觉呢？

路由器导航保护：

有时，我们需要通过路由执行一些操作，比如最常见的登录权限验证。当用户符合条件时，让他进入导航，否则取消跳转，跳转到登录页面让他登录。

出于这个原因，我们有许多方法来植入路由导航过程：全局的、专用于单个路由的或组件级的。建议先阅读工艺路线文件

全球卫士

vue路由器在全球范围内有三个防护装置：

在进入路线之前，每个全球前沿警卫。router.beforeResolve全局解析guard (2.5.0)调用路由器. beforeRouteEnter调用后进入路由后的每个全局后挂钩。方法：

//main.js从“”导入路由器。/router '；//介绍路由路由器，beforeeach ((to，from，next)={ next()；});router.beforeResolve((to，from，next)={ next()；});Router.aftereach ((to，from)={console.log('每个全局后挂钩后')；});至、自和下一步：

往返是将要进入和离开的路由对象，路由对象是指由此获得的路由对象。平时$路线。

参数next:Function是一个函数，必须调用，否则无法进入路由(页面空白)。下一步()进入路线。下一步(false):取消传入路由，并将url地址重置为from路由地址(即，要保留的路由地址)。下一步跳转到新的路线，当前导航被中断，新的导航再次开始。我们可以这样跳：next('path address ')或next({path:''})或next({name:''})

并允许设置replace: true和name: 'home '等选项

以及您在路由器链接或路由器中使用的对象选项.

路由专用保护

如果不想全局配置防护，可以为某些路由单独配置防护：

constraout=new vuerouter({ route : [{ path : '/foo '，component:foo，beforeenter3360 (to，from，next)={//参数用法相同，调用顺序在全局前保护后面，因此不会被全局保护覆盖/.}}

当beforeRouteEnter离开当前路由时文档中的介绍当BeforeRouteDate(2.2)路由重用相同的组件时：

before route entter(to，from，next){//呼叫路线专属守卫后！可以！获取组件实例' this '，组件实例尚未创建}，beforerouteupdate (to，from，next){//当当前路由改变，但组件被重用时，调用可访问的组件实例' this'/例如，对于具有动态参数/Foo/:id、in /foo/1和/Foo的路径。在这种情况下会调用这个钩子。}，before route eleve(to，from，next){//在导航离开此组件的相应路由时调用，您可以访问组件实例‘this `} before route enter来访问此

因为钩子是在组件实例创建之前调用的，所以无法获得组件实例，可以通过将回调传递给next来访问组件实例。

但是，回调是在挂载之后执行的，所以在我看来，对这个的访问意义不大，可以放在created或者mount中。

before routenter(to，from，next) {console.log('在路由的独占保护之后调用')；下一步(vm={//通过“vm”访问组件实例“this”执行回调的时间被推迟。})} before route leave:

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

Beforerouteleave (to，from，next) {if(保存文章){ next()；//允许您离开或跳转到另一条路线。上面说的是} else {next(假)；//取消离开}}关于钩子的一些知识：

路由钩子函数的错误捕获

如果我们在全局守护/路由独占守护/组件路由守护的钩子函数中有错误，我们可以如下捕获它：

路由器。onerror (callback={//2.4.0)不常用，看看console.log(callback，‘callback’)；});路由文档中有更多示例方法：动态添加路由等。如果你感兴趣，可以去了解一下。

跳到一个无限循环，页面总是空白的

我了解到很多人都会遇到这个问题。让我们看看这个伪代码：

路由器。在每一个((to，from，next)={ if(log in){ next()} else { next({ name : ' log in ' })；} });看逻辑好像是对的，但是我们跳转登录之后，因为此时我们还没有登录，我们会一直跳转登录然后循环不休，页面总是空白的，所以需要稍微改变一下判断条件。

如果(log in | | to . name===' log in '){ next()}//log in，或者在转到登录页面时，允许您跳转到路由全局post hook:

文档中提到，因为router.afterEach不接受下一个功能，所以不会改变导航本身，这意味着它只能作为钩子使用，但是当我自己尝试的时候，我发现我们可以通过这种形式实现跳转：

//main.js从“”导入路由器。/router '；//介绍路由路由器. afterEach((to，from)={if(未登录. name！==' log in '){ router . push({ name : ' log in ' })；//跳转登录} })；嗯，这是完全可以实现的，通过路由器更好。在每一个之前，所以我会大惊小怪。

完整的路线导航解决流程(不包括其他生命周期):

触发进入其他路线。在离开路线之前调用组件保护。调用局前端防护：before每个调用重用组件中的beforeRouteUpdate来调用独占防护beforeEnter。分析异步路由组件。在传入路由组件中调用beforeRouteEnter，并在确认解析导航之前调用全局解析保护。调用全局post钩子的afterEach钩子。触发DOM更新(已装载)。执行保活[你不知道[我猜你不知道]，这是在beforeRouteEnter Guard中传递给next的回调函数

开发Vue项目时，大部分组件不需要多次渲染，所以Vue提供了内置的组件保活来缓存组件的内部状态，避免重新渲染。文件在这里。

文档：像转换一样，keep-alive是一个抽象组件：它不会自己呈现一个DOM元素，也不会出现在父组件链中。

用法：

缓存动态组件：

当keep-alive包装动态组件时，它会缓存非活动的组件实例，而不是销毁它们，这几乎没有实际意义。-basic-keep-alive组件：是=' view'/component/keep-alive！-多个条件判断子组件-保持活动comp-av-if=' a 1 '/comp-a comp-b v-else/comp-b/保持活动缓存路由组件：

保活可以缓存所有路径匹配的路由组件，包括路由组件中的组件，这是大多数保活使用场景的情况。

保持活动路由器视图/路由器视图/保持活动生命周期挂钩：

既然这篇文章是Vue钩子功能的特殊表现，那就一定要扣~

在保活包含的组件/路径中，将有两个钩子：被激活和去激活。

文档：在2.2.0和更高版本中，激活和停用将在树中的所有嵌套组件中触发。

首次呈现组件时调用Activated，然后每次激活缓存组件时调用activated。

激活的呼叫时间：

装载后，在beforeRouteEnter守护程序传递给下一个回调函数之前，第一次进入缓存路由/组件，调用：

BeforeMount=如果您从另一个路由/组件进入(组件被销毁/销毁或左缓存被停用)=mounted=被激活以进入缓存组件=执行beforeRouteEnter回调

因为组件是缓存的，所以当再次进入缓存路由/组件时，不会触发这些钩子：

//在装载前创建装载前创建不会触发。

因此，后续通话的时间是：

组件销毁已销毁/或保持缓存停用=已激活进入当前缓存组件=执行beforeRouteEnter回调

//组件缓存或销毁，嵌套组件的销毁和缓存也在这里触发

停用：当组件停用时调用(离开路线)

如果使用keep-alive，就不会调用beforeDestroy(组件销毁前的钩子)和Destroy(组件销毁)，因为组件还没有被销毁并被缓存。

这个钩子可以看作是beforeDestroy的替代品。如果您缓存了组件，并在组件被破坏时做了一些事情，那么您可以将它放入这个钩子中。

如果您离开路线，它将依次触发：

离开当前路线挂钩前路线前进=路线前护板前每个=全局后挂钩后每个=停用离开缓存组件=激活进入缓存组件(如果您也输入缓存路线)

如果离开的组件没有被缓存，BeforeDestroy将替换停用的组件

如果传入路由没有被缓存，全局后挂钩after each=destroy destroy=before create，等等。

那么，如果我只想缓存一些路由/组件，该怎么办呢？

缓存要缓存的路由：

Vue2.1.0之前的：

要实现类似的操作，您可以：

配置路由元信息，创建两个保活标签，使用v-if通过路由元信息判断缓存了哪些路由。keep-alive路由器-视图v-if='$route.meta.keepAlive '！-这是将被缓存的路由-/路由器-视图/保持活动路由器-视图v-if='！$route.meta.keepAlive！-因为使用了v-if，所以应该在下面创建一个未缓存的路由视图出口-///router-view//router配置新路由器({route: [{path:'/'，名称：' home '，组件3360 home，Meta: {keepAlive: true //需要缓存}}，{ path : '/3: id '，名称：' edit '，组件： edit，Meta:在VUE版本Vue2.1.0之后：

在使用路由元信息的方式上，需要多创建一个路由器视图标签，为每条路由配置一个元信息，可以达到预期的效果，但是有点太麻烦了。

幸运的是，在Vue2.1.0之后，Vue增加了两个新的属性，通过keep-alive有条件地缓存路由/组件。

添加属性：

Include:匹配的路由/组件将被缓存exclude:匹配的路由/组件将不被缓存include和exclude支持三种有条件地缓存路由的方式：逗号分隔的字符串形式、常规形式和数组形式。

正则和数组形式必须以v-bind的形式使用。

如何使用缓存组件：

！-逗号分隔字符串-keep-alive include=' a，b ' component : is=' view '/component/keep-alive！-正则表达式(使用` v-bind `)-keep-alive : include='/a | b/' component 3360 is=' view '/component/keep-alive！-array(使用` v-bind `)-保活： include=' ['a '，' b ']' component 3360 is=' view '/component/keep-alive但是在更多的场景中，我们将使用keep-alive来缓存路由：

保持活动包括=' a '路由器视图/路由器视图/保持活动匹配规则：

1.如果名称选项不可用，首先匹配组件的名称选项。

2.匹配其本地注册名称。(父组件组件选项的关键值)

3.匿名组件，无法匹配。

例如，路由组件没有名称选项，也没有注册的组件名称。

4.只能匹配当前包装的组件，不能匹配嵌套在下面的子组件。

例如，在路由中使用时，它只能匹配路由组件的名称选项，但不能匹配路由组件内嵌套组件的名称选项。

5.Document: keep-alive在功能组件中无法正常工作，因为它们没有缓存的实例。

6.排除优先级高于包含

也就是说，当包含和排除同时存在时，排除生效，而包含不生效。

keep-alive include='a，b' exclude='a '！-只有a没有被缓存-路由器-视图/路由器-视图/保持活动当一个组件被exclude匹配时，该组件将不会被缓存和激活，也不会被调用。

组件生命周期挂钩：

关于组件的生命周期，是时候发布这张图片了：

这张图已经拍得很清楚了，很多人对这部分也很清楚。大多数生命周期都不会被使用。这里有几点：

Ajax请求最好放在created中，因为此时可以访问它，并且请求的数据可以直接放在data中。我在这里见过几次，面试官问：ajax请求应该放在哪个生命周期。对dom的操作应该放在挂载中，在挂载前访问dom是未定义的。每次你进入/离开一个组件，你都必须做一些事情。你用什么钩子：不缓存：

您可以在进入时使用创建和安装的钩子，在离开时使用beforedestroy和destroy钩子。beforedestroy可以访问此，但destroyed不能访问此。

缓存的组件：

缓存组件后，重新输入组件将不会触发创建前、创建前、装载前和装载前。如果你想在每次进入组件的时候做一些事情，你可以把它放在进入缓存组件的激活钩子中。

同样，在离开缓存组件时，不会触发beforeDestroy和Destroy。相反，您可以使用停用的钩子离开缓存组件。

触发挂钩的完整顺序：

结合路线导航、保持活动和组件生命周期挂钩，假设触发序列从组件A离开并首次进入组件B:

路由组件的组件在路由之前离开钩子，这可以取消路由离开。BeforeEach:路由全局预守护，可用于登录验证、全局路由加载等。路由前输入：路由前专用保护路由器：路由组件的组件进入路由前挂钩。BeforeResolve:路由全局解析保护在每个：路由全局后挂钩beforeCreate:组件生命周期之后，无法访问此。Created:组件生命周期，这个可以访问，但是dom不能访问。BeforeMount:组件生命周期停用：离开缓存组件A，或者触发A的beforeDestroy和销毁组件来销毁钩子。Mounted:访问/操作dom。Activated:进入缓存组件和的嵌套子组件(如果有)。接下来执行beforeRouteEnter回调函数。结论

Vue提供了很多钩子，但是我们很少使用很多钩子。只有知道这些钩子函数的触发顺序以及背后的一些限制，我们才能正确使用这些钩子。希望看过这篇文章的同学对这些挂钩有更清晰的认识，使用起来更方便。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。