vue生命周期总结

本文介绍了Vue框架中的组件生命周期及其相关的钩子函数，并详细阐述了全局路由钩子与组件内路由钩子的工作原理及其应用场景。
Vue生命周期由八个阶段组成：beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）和 destroyed（销毁后）。这些阶段通过调用对应的钩子函数可以实现数据管理和DOM渲染两大功能。
全局路由钩子通过router.beforeEach()和router.afterEach()实现导航前后状态的触发与处理功能：
router.beforeEach()在导航路径变更前触发，默认参数为next()
router.afterEach()在导航路径变更后触发，默认参数为next()
此外，“组件内”路由钩子如beforeEnter、beforeUpdate等，在单个组件配置中可设置以实现更复杂的导航逻辑控制。
整体来看，文章结合实例清晰展示了Vue框架在组件开发中的关键特性与实践应用方法。

一、vue生命周期

vue生命周期是什么？

Vue生命周期指的是从创建之初到销毁为止vue实例对象所经历的过程，在该系统中所有的功能实现都以这一周期为基础，在该周期的不同阶段通过相应的钩子函数能够完成组件数据管理和DOM渲染两大核心任务。

vue生命周期可以分为八个阶段，分别是：

pre-创建

1、创建前（beforeCreate）

该钩子函数名为beforeCreate。在实例初始化之后发生的此阶段中，在数据观察与事件机制尚未建立完成的情况下（即它们还未完全建立），因此无法获取DOM节点。

2、创建后（created）

也就是对应的回调函数被命名为created。在该阶段vue实例已生成目前还无法获取DOM元素

##beforeCreate和created函数都是在实例化Vue的阶段，在_init方法中执行的。beforeCreate和created的钩子调用是在initState函数的前后，initState的作用是初始化props、data、methods、watch、computed等属性，beforeCreate的钩子函数中就不能获取到props、data中定义的值，也不能调用methods中定义的函数，而created可以。 在这俩个钩子函数执行的时候，还没有渲染 DOM，所均访问不到DOM

通常情况下，在组件的加载过程中需要与后端进行交互。可以在before和after这两个钩子函数中执行。如果需要访问props、data等属性的数据，则需要使用created钩子函数。

3、载入前（beforeMount）

对应的钩子函数名为beforemount，在本阶段中我们虽无法获取具体的DOM元素信息；然而由于Vue框架在挂载过程中已成功构建起项目的根节点对象，默认情况下该对象即为整个项目的 entryPoint 元素体。随后Vue对DOM的操作将在该基础根节点上展开；此阶段属于过渡性质，在实际开发中通常在一个项目中仅应用一两次。

4、载入后（mounted）

钩子函数 named 'mounted' 是我们最常使用的功能之一。它是我们工作中最常用的主要功能之一，在大多数场景下都会被调用到这里。此时系统已经准备好接收并处理相关的事件数据。

在Vue实例挂载阶段，在完成组件实例化后才会依次调用beforeMount和mounted钩子函数。值得注意的是，在整个组件生命周期中插入组件钩子时遵循特定规则：将所有需要处理的钩子按照从子到父的逻辑顺序进行组织和安排

插入组件钩子时遵循先子后父的原则：insertedVnodeQueue（用于存储被嵌入到Vue实例中的钩子函数数组）的具体添加流程需要严格按照此规则进行操作以确保系统的正常运行

5、更新前（beforeUpdate）

在Vue组件生命周期管理中，钩子函数为beforeUpdate，在这一特定阶段执行任务。当组件的数据发生更新时，并未立即完成对UI的刷新操作；然而，在DOM树结构发生变化的情况下，则是由Vue自身的双向数据绑定机制所驱动的。这正是Vue实现双向数据绑定机制的原因。

6、更新后（updated）

对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。

beforeUpdate 和 updated 的钩子函数在数据更新时都会被执行。

beforeUpdate 的钩子函数会在 ** 渲染Watcher** 的 pre 钩子函数中被执行。
update 的钩子函数则会在调用 flushSchedulerQueue 方法时被执行。

7、销毁前（beforeDestroy）

该钩子函数名为beforeDestroy，在上一个阶段中，Vue已成功实现了对DOM的动态更新。当无需让Vue控制DOM时，则需进行实例销毁操作。具体而言，在执行该操作之前会触发beforeDestroy钩子函数。

8、销毁后（destroyed）

对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。

组件开发过程中始终贯穿着Vue的生命周期思想。掌握并合理运用其生命周期钩子函数能够使我们更好地调控数据流及其对DOM的作用；而这一思想不仅是Vnode体系框架的核心理念之一，更是MVVM架构的重要理论基础和发展延续。

在组件销毁阶段启动的一系列 hook 函数中，默认情况下 beforeDestroy 和 destroyed 钩子函数均会被注册并运行。其中 beforeDestroy 钩子会在 destroy 方法启动之前立即被激活，在此过程中首先完成一系列必要的清理工作：包括从 parent.children 中删除自身、删除 watch 节点以及当前 VNode 执行 beforeDestroy 钩子的过程。随后，在 destroy 方法内部调用 vm.patch(vm._vnode, null)，这会依次触发所有父组件及其所属 child 节点的所有销毁 hook 函数。这种按层级递归的方式确保了 destruction 的有序性与安全性——因此，在 $destroy 方法内部按照自顶向下的顺序依次处理各个父组件及其所属 child 节点。

二、全局路由钩子

该钩子函数会在所有路径被访问时被调用，并且其作用位置是在router方法中执行。

router.beforeEach() 进入之前触发 router.afterEach() 进入之后触发

⑴ beforeEach（全局前置守卫）

安装全局路由钩子

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

①route: Route : 目标路由对象路由对象（route是一个对象，在此场景中表示目标路由对象，并可通过该表达式获取到目标路由对象的相关属性信息）

②from: Route : 当前导航正要离开的路由

③next: Function体：该子任务必须被调用以确保其执行效果取决于 next 方法所传递的参数。

next参数：

next()函数：按照管道顺序依次处理下一个钩子。当所有钩子均完成处理后，则导航的状态归为此处已确认。

next(false) : 终止当前的导航流程。 当浏览器 URL 发生变动时（可能由用户操作或通过后退按钮触发），URL 地址将重新定向至从 from 路由对应的地址。

next() 或包含路径属性指定为 '/' 的 next({ path: '/' })：触发一次路由跳转至新的地址。当前路由导航中断后会启动新的导航流程。调用 next() 可接受任意位置对象，并允许设置如 replace: true、name: 'home' 等选项及其他与 router-link 中的 to 属性或 router.push 相关的选项。

当调用 next 函数时，在 2.4.0 及以上版本中新增了此功能。如果传入的参数是一个 Error 实例，则 navigation 将被终止，并且该 error 会通过 router's onError 手动触发相应的处理逻辑。

ps~ : 确保要调用 next 方法，否则钩子就不会被 resolved。

（2）beforeResolve]（2.5+）：

这个组件类似于beforeEach，在路由跳转之前触发。该组件的参数包括to、from、next三个字段。主要区别在于它在路由跳转之前触发。

区别在于，在导航确认前，在所有组件内完成守卫与异步路由组件的解析工作后（即完成解析后），触发解保就会被调用。

即在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。

(3). afterEach（全局后置钩子）

outer.beforeEach执行于页面加载之前；与之相对地,router.afterEach则执行于页面加载之后

和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身

三、路由内钩子

在单个路由配置中同样可以设置的钩子函数，在具体位置如图所示的位置上实现了一定的功能。其中像Foo这样的组件同样具备这种钩子功能。目前仅实现了beforeEnter hook功能。

 const router = new VueRouter({

    
   routes: [
    
     {
    
       path: '/foo',
    
       component: Foo,
    
       beforeEnter: (to, from, next) => {
    
     // ...
    
       }
    
     }
    
   ]
    
 })

与$beforeEach$完全一致的是当同时配置时，则会在$beforeEach$之后依次执行，并且包含$to$、$from$以及$next$。

四、组件内钩子

1、beforeRouteEnter(to,from,next)

在beforeRouteEnter函数内部时,this变量为undefined。这是因为，在beforRouteEnter路由钩子函数被执行的过程中, 组件尚未被创建出来。随后调用beforRouteEntry, 在之后调用组件周期钩子函数beforeCreate。我们可以使用next方法获取组件的实例对象, 如: next( (vm)=>{} ), 其中参数vm即为所求的实例化对象。

2、beforeRouteUpdate(to,from,next)

该组件具有二级导航功能，在点击二级导航项时会显示相关内容。然而该组件被复用后会只生成一次列表项，在进入下一级别节点后无法判断是否已刷新。

在某个组件中存在二级导航结构时，在对该二级导航进行点击操作时（即发生交互事件），该路径将被重新计算，并将执行相应的处理流程。

3、beforeRouteLeave(to,from,next)

当用户从about切换至user界面时，在页面尚未完全加载所有数据的情况下（或状态下），我们选择阻止用户进入该界面。