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实例已经销毁

相关阅读:
K8s网络存储，NFS，PV,PVC，StorageClass等详解
 分布式一致性软件-zookeeper
ar景区智慧导览系统小程序开发源码搭建
 低轨卫星传播特性仿真与分析
 实验室安全巡检管理系统—全面安全检查
 幻兽帕鲁服务器配置怎么选？多少钱？
Flutter Doctor：Xcode 安装不完整
 Vulhub 刷题(一)
LeetCode50天刷题计划第二季（Day 2 — 格雷编码（12.30-13.00）子集 II（13.00-14.00）
力扣刷题day39|70. 爬楼梯(进阶版)、322零钱兑换、279完全平方数
原文地址：https://blog.csdn.net/m0_62371650/article/details/126941745