Vue的生命周期跟我们一样,你知道吗?

Vue的生命周期

组件的创建到销毁的过程就叫vue的生命周期

在这里插入图片描述

vue生命周期钩子官方文档：
- 官方文档图解介绍：生命周期图示
- 官方文档详细介绍：vue生命周期钩子介绍
==vue生命周期钩子介绍： vue从创建到销毁过程中，会执行的一些回调函数 ==
- 钩子 ：一种回调函数
  - 例如
    - window.onload = function(){ dom加载完毕，外部资源加载完毕就执行 }
- 生命周期 ： vue实例从出生到扑街的过程
  - 出生：
    - 创建vue实例
    - 创建data数据
    - 创建el挂载点
    - 将data数据渲染到el挂载点
  - 扑街
    - vue实例被销毁
      - 这里销毁不是指vue实例变成了null，而是指解除data与el的关联
        说人话：修改了data，页面不会被渲染
注意点
- 根据官网文档介绍：每一个生命周期钩子中的this都是指向vue实例
- 所以，生命周期钩子不能是箭头函数

vue的生命周期钩子分为四大阶段,8个方法
初始化
挂载
更新
销毁

执行顺序	钩子函数	执行时机
1	`beforeCreate(){}`	vue实例创建了，但是el和data还没有创建（准备创建data）底层（初始化vue实例，初始化钩子函数，初始化一些事件和侦听器配置项）
2	`created() {}`	data数据创建了，但是el挂载点还没有创建 (准备创建el) 底层：初始化data中的数据和methods中的方法
3	`beforeMount() {}`	el挂载点创建了，但是data数据还没有渲染（准备渲染中）底层：创建el挂载点，并且生成虚拟DOM
4	`mounted() {}`	data数据第一次渲染完毕 (完成初始渲染) 底层：将虚拟dom渲染成真实DOM
5	`beforeUpdate() {}`	检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) `会执行多次`
6	`updated() {}`	变化后的data数据，完成渲染到页面（完成重新渲染）`会执行多次`
7	`beforeDestroy() {}`	vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染底层：解除事件绑定、侦听器、组件
8	`destroyed() {}`	vue实例已经销毁

相关阅读:
【QML】一文入门QML应用程序的性能分析
 【Python&GIS】基于Python实现栅格转面、面转栅格（栅格、矢量互转）
python 异常
 异常情况下的生命周期
 7. SAP ABAP OData 服务如何支持 $orderby (排序)操作
 不到一个月独自一人开发斗地主游戏（h5 + 安卓 + 苹果）
HTML5期末大作业：北京旅游网页设计制作(1页) 简单静态HTML网页作品我的旅游网页作业成品学生旅游网站模板
 Leetcode27-移除元素详解
 一些奇奇怪怪的东西
 同花顺_代码解析_技术指标_Z_3
原文地址：https://blog.csdn.net/m0_62371650/article/details/126941745