vue 的生命周期

embedded/2024/12/29 2:21:38/

一、创建阶段(BeforeCreate、Created)

1. BeforeCreate

这是组件实例刚被创建时触发的第一个生命周期钩子。此时,组件的`data`和`methods`等选项还没有被初始化,数据观察(`watch`)和事件/生命周期方法也尚未被设置。这意味着在这个阶段,组件实例还只是一个空壳,不能访问组件中的数据和方法。

主要用于一些初始的设置或者加载外部资源,不过由于数据和方法不可用,其应用场景相对较少。

2. Created

这个钩子在组件实例完成数据观测(`data observer`)和事件配置后被触发。此时,组件的`data`属性已经被初始化,可以访问和操作组件的数据和方法。

通常用于初始化数据、调用方法,是在组件创建阶段比较常用的钩子。

二、挂载阶段(BeforeMount、Mounted)

1. BeforeMount

在这个阶段,模板编译已经完成,但还没有将编译后的模板挂载到真实的 DOM 节点上。此时,`el`属性已经被解析,但虚拟 DOM(`v-node`)还没有渲染成真实的 DOM 元素。可以理解为,组件已经知道要挂载到哪里,但还没有进行实际的挂载操作。

这个钩子可以用于在挂载之前对 DOM 结构进行最后的调整或者添加一些自定义的属性。不过这种操作相对较少,因为大多数情况下,组件的 DOM 结构在模板阶段就已经确定。

2. Mounted

这是组件挂载完成后的钩子。此时,组件已经被渲染到真实的 DOM 中,可以通过`this.$el`访问组件的 DOM 元素。对于需要操作 DOM 元素的操作,如获取元素的高度、宽度,或者添加一些第三方 DOM-related 的插件,通常在这个钩子中进行。

三、更新阶段(BeforeUpdate、Updated)

1. BeforeUpdate

当组件的数据发生变化,即将重新渲染之前触发这个钩子。此时,组件的虚拟 DOM 已经重新生成,但还没有应用到真实的 DOM 上。可以在这个钩子中获取到变化前的 DOM 状态,对于一些需要在更新前记录状态或者进行特殊处理的情况很有用。

2. Updated

组件的 DOM 更新完成后触发这个钩子。此时,组件的虚拟 DOM 已经更新,并且对应的真实 DOM 也已经更新。不过需要注意的是,在这个钩子中避免进行会再次触发更新的操作,否则可能会导致无限循环更新。

可以用于在组件更新后执行一些依赖于 DOM 更新的操作,比如重新计算组件内元素的位置或者样式。在一个包含动画效果的组件中,当组件数据更新导致动画元素的属性变化时,可能在`Updated`钩子中启动或者调整动画效果。

四、销毁阶段(BeforeDestroy、Destroyed)

1. BeforeDestroy

在组件被销毁之前触发。此时,组件仍然完全可用,`data`、`methods`等仍然可以访问。这个钩子通常用于清理一些定时器、取消网络请求、移除事件监听器等操作,以避免内存泄漏。

2. Destroyed

组件销毁完成后触发。此时,组件的所有指令、事件监听器等都已经被移除,组件实例以及其相关的 DOM 元素(如果有的话)都已经从内存中被清除。这个钩子主要用于一些最后的清理工作或者日志记录。


http://www.ppmy.cn/embedded/149615.html

相关文章

深入解析MVCC中Undo Log版本底层存储读取逻辑

一、引言 多版本并发控制(MVCC,Multi-Version Concurrency Control)是一种广泛应用于关系数据库管理系统中的并发控制技术。它通过保存数据的历史版本,使得在事务并发执行时,每个事务都能看到数据的一致性视图。在MVC…

Boost之log日志使用

不讲理论,直接上在程序中可用代码: 一、引入Boost模块 开发环境:Visual Studio 2017 Boost库版本:1.68.0 安装方式:Nuget 安装命令: #只安装下面几个即可 Install-package boost -version 1.68.0 Install…

vue2使用pdfjs-dist和jsPDF生成pdf文件

vue2使用pdfjs-dist和jsPDF生成pdf文件 1、安装依赖 npm install pdfjs-dist2.6.3472、引入依赖 import { jsPDF } from jspdf// 使用require方式导入pdfjs-dist v2.5.207,高版本报错(import导入会报错:GlobalWorkerOptions undefined&…

java高频面试之SE-04

面向对象和面向过程的区别? 面向对象和面向过程是两种不同的编程范式,它们在设计和组织代码方面存在显著的区别。 当然可以,下面用通俗易懂的例子来说明面向对象和面向过程的区别。 面向过程 例子:做早餐 步骤: 准…

华为IoTDA 智慧路灯设备SDK与平台通信C 流程bug解决

华为官方教程网址:智慧路灯设备SDK与平台通信(C)_设备接入 IoTDA_华为云 “建立连接”部分前完全正确。 问题描述: 在连接时,填写了正确的“设备id”和“密码”依旧报错: connect failed: messageld 0,cod…

【人工智能学习】线性回归模型使用Python实现简单的线性回归

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默, 忍不住分享一下给大家。点击跳转到网站 学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……) 2、学会Oracle数据库入门到入土用法(创作中……) 3、手把…

STM32开发笔记123:使用STM32CubeProgrammer下载程序

文章目录 前言一、STM32CubeProgrammer二、一键下载电路三、STM32CubeProgrammer的使用1、配置2、连接3、擦除芯片4、下载程序(1)在STM32CubeIDE中编译出HEX文件(2)打开文件并下载(3)下载成功后,显示如下信息前言 本文介绍使用STM32CubeProgrammer下载程序到STM32微控制…

[阅读笔记]GPU-Util指标的重新理解

主要来自于文章 搞懂 NVIDIA GPU 性能指标 很容易弄混的一个概念: Utilization vs Saturation 这篇文章简单的来说,就是纠正我们对nvidia-smi中的GPU-Util这一个指标的直观理解。 在直观的理解中,这个指标应该表示GPU计算资源的饱和度&…