Vue生命周期以及钩子函数

哈木克

已于 2022-10-25 19:18:03 修改

阅读量1.5k

点赞数 2

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-09-22 15:28:30 首次发布

本文链接：https://blog.csdn.net/qq_44790595/article/details/126990420

版权

Vue 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

Vue生命周期

vue 实例从创建到销毁的过程就是生命周期。
在这里插入图片描述
vue生命周期主要分为四大阶段和八大钩子函数：

阶段一、创建前/后

创建vue实例（创建组件和创建vue实例的流程基本一致）进行初始化，设置一些私有属性到实例中

运行生命周期钩子函数beforeCreate：这时还不能访问到data、computed、watch、methods上的方法和数据

开始注入流程：处理computed、methods、data、provide、inject等属性，最后使用代理模式将它们挂载到实例中，并监听data对象数据变化情况

运行生命周期钩子函数created：此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性

阶段二、挂载前/后

生成render函数：如果有配置，直接使用配置中的render
如果没有，则使用运行时编译器，将模板编译成render（把data对象中的数据和vue语法写的模板编译成html）

运行生命周期钩子函数beforeMount（此时还没有将编译出的html标签渲染到页面上）

将编译后的html替换掉el属性所指向的dom对象或者替换对应html标签中的内容

运行生命周期钩子函数mounted（整个实例生命周期只执行一次mounted） （模板中的html渲染到html 页面中）此时可以进行发送ajax请求获取数据的操作进行数据初始化

阶段三、更新前/后

数据变化，重渲染

运行生命周期钩子函数beforeUpdate：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染

当新组件需要创建时，进入实例化流程

阶段四、摧毁前/后

当旧组件需要删除时，会调用旧组件的$destroy方法删除组件，该方法会先触发生命周期钩子函数beforeDestroy（实例仍然可用，this 仍能获取到实例）然后递归调用子组件的destroy方法，然后触发生命周期钩子函数destroyed。（这个过程中会销毁所有Watcher，子组件和事件监听，最后销毁vue实例）

当组件属性更新时，进入重渲染流程

运行生命周期钩子函数updated （此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作）

至此，vue实例的生命周期结束。

生命周期钩子函数总结

 1. beforeCreate 	初始化实例后 数据观测和事件配置之前调用
 2. created 	实例创建完成后调用
 3. beforeMount 	挂载开始前被用
 4. mounted 	el被新建 vm.$el 替换并挂在到实例上之后调用
 5. beforeUpdate 	数据更新时调用
 6. updated 	数据更改导致的 DOM 重新渲染后调用
 7. beforeDestory 	实例被销毁前调用
 8. destroyed 	实例销毁后调用

其他钩子函数

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

errorCapured钩子：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

Vue2与Vue3生命周期对比

Vue2	Vue3
beforeCreate(组件创建之前)	setup(组件创建之前)
created(组件创建完成)	setup(组件创建完成)
beforeMount(组件挂载之前)	onBeforeMount(组件挂载之前)
mounted(组件挂载完成)	onMounted(组件挂载完成)
beforeUpdate(数据更新，虚拟DOM打补丁之前)	onBeforeUpdate(数据更新，虚拟DOM打补丁之前)
updated(数据更新，虚拟DOM渲染完成)	onUpdated(数据更新，虚拟DOM渲染完成)
beforeDestroy(组件销毁之前)	onBeforeUnmount(组件销毁之前)
destroyed(组件销毁之后)	onUnmounted(组件销毁之后)