VUE生命周期

vue2.x生命周期

共分为八个阶段：

创建前/后【beforeCreate() / created()】、挂载前/后【beforeMount() / mounted()】

更新前/后【beforeUpdate() / updated()】、销毁前/销毁后【beforeDestroy() / destroyed()】。

1、beforeCreate （创建前）：数据观测和初始化事件还未开始， 此时data 的响应式追踪、 event/watcher 都还没有被设置， 也就是说不能访问到 data、 computed、 watch、 methods 上的方法和数据。

2、created （创建后）：data 和 methods 初始化完毕，此时可以使用 methods 中的方法和 data 中的数据。组件实例已经创建完成，实例已完成数据观测（Data Observer）、属性与方法的运算等；实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，所以能获得 $data属性，但是此时渲染的节点还未挂载到 DOM，所以不能访问到 $el 属性

3、beforeMount （挂载前）：在挂载开始之前被调用， 相关的 render函数首次被调用。 实例已完成以下的配置： 编译模板， 把 data 里面的数据和模板生成 html。 此时还没有挂载 html 到页面上。

4、mounted （挂载后）：在 el 被新创建的 vm.$el 替换， 并挂载到实例上去之后调用。 实例已完成以下的配置： 用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。 完成模板中的 html 渲染到 html 页面中。 此过程中进行 ajax 交互；可以获得DOM元素。

5、beforeUpdate （更新前）：响应式数据更新时调用， 此时虽然响应式数据更新了， 但是对应的真实 DOM 还没有被渲染。

6、updated （更新后）：在数据更新之后被调用，该方法还会在组件的子组件更新之后被调用。注：虽然可以执行依赖于 DOM 的操作。 然而在大多数情况下， 应该避免在此期间更改状态， 因为这可能会导致更新无限循环。 该钩子在服务器端渲染期间不被调用。

7、beforeDestroy （销毁前）：实例销毁之前调用。 这一步， 实例仍然完全可用， this 仍能获取到实例。

8、destroyed （销毁后）：实例销毁后调用， 调用后， Vue 实例指示的所有东西都会解绑定， 所有的事件监听器会被移除， 所有的子实例也会被销毁。 该钩子在服务端渲染期间不被调用。

扩展：keep-alive 独有的生命周期， 分别为 activated 和deactivated。

用 keep-alive 包裹的组件在切换时不会进行销毁， 而是缓存到内存中并执行 deactivated 钩子函数， 命中缓存渲染后会执行 activated 钩子函数。

生命周期函数在实际开发中的应用【部分例子】

1、在钩子函数 created、 beforeMount、 mounted 中调用“请求异步数据”方法，因为在这三个钩子函数中， data 已经创建， 可以将服务端端返回的数据进行赋值。

    （推荐在 created 钩子函数中调用异步请求）

        能更快获取到服务端数据， 减少页面加载时间， 用户体验更好；

        SSR 不支持 beforeMount 、 mounted 钩子函数， 放在 created 中有助于一致性。

2、在mounted钩子函数中，可以进行DOM的操作

3、在beforeDestroy钩子函数中，清除定时器，解绑事件等操作

vue3.x生命周期

注：Vue3.x 生命周期在调用前需要先进行引入

1、setup  :  开始创建组件之前，在beforeCreate和created之前执行。创建的是 data和 method

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。

2、onBeforeMount ：     组件挂载到节点上之前执行的函数。

3、onMounted ：            组件挂载完成后执行的函数。

4、onBeforeUpdate ：    组件更新之前执行的函数。

5、onUpdated ：             组件更新完成之后执行的函数。

6、onBeforeUnmount ：组件卸载之前执行的函数。

7、onUnmounted ：       组件卸载完成后执行的函数。

8、onActivated ：           被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。

                                          被激活时执行。

9、onDeactivated ：       比如从 A 组件，切换到 B 组件，A 组件消失时执行。

10、onErrorCaptured：  当捕获一个来自子孙组件的异常时激活钩子函数。

 Vue2.x 和 Vue3.x 生命周期对比：

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

此次部分借鉴一下链接文章万分感谢

http://原文链接：https://blog.csdn.net/qq_38290251/article/details/131453018