当前位置： 首页 > news >正文

第十一章 Vue生命周期及生命周期的四个阶段

news 2026/5/12 2:52:44

目录

一、引言

1.1. Vue生命周期的具体阶段

1.2. 每个阶段的具体作用和常用场景

1.3. 生命周期钩子函数

​二、代码示例

三、运行效果 

一、引言

Vue生命周期是指Vue组件实例从创建到销毁的整个过程。在这个过程中，组件经历了一系列的阶段，每个阶段都有其特定的生命周期钩子函数，这些钩子函数允许在不同的阶段插入开发人员自定义的代码逻辑。理解Vue生命周期有助于更好地管理组件的状态和行为，特别是在数据管理和DOM渲染方面。

1.1. Vue生命周期的具体阶段

生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁

1. 创建

beforeCreate：在实例创建之前调用，此时还没有调用data和methods中的方法。

created：实例创建后调用，此时已经完成了数据的观测，但是尚未挂载DOM，$el属性尚不可用。

2. 挂载

‌beforeMount‌：在挂载之前调用，相关的render函数首次被调用，可以在此时对实例进行渲染。

mounted：实例已经挂载到DOM上后调用，此时期已经和DOM进行了关联，可以用$el访问到挂载的DOM元素。

3. 更新

‌beforeUpdate‌：数据更新时调用，发生在虚拟DOM打补丁之前。

‌updated‌：数据更新后调用，虚拟DOM已经打补丁之后。

4. 销毁

‌beforeDestroy‌：实例销毁之前调用。

‌destroyed‌：实例已销毁后调用。

1.2. 每个阶段的具体作用和常用场景

  • ‌created‌：常用于发起网络请求，因为此时已经完成了数据的观测，但尚未挂载DOM。
  • ‌mounted‌：常用于操作DOM元素，因为此时实例已经挂载到DOM上。
  • ‌updated‌：常用于执行依赖于DOM的操作，因为此时虚拟DOM已经更新。
  • ‌beforeDestroy‌：常用于进行清理工作，如移除事件监听器等，因为实例即将销毁。

1.3. 生命周期钩子函数

Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码。

二、代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},// 1. 创建阶段（准备数据）beforeCreate () {console.log('beforeCreate 响应式数据准备好之前', this.count)},created () {console.log('created 响应式数据准备好之后', this.count)// this.数据名 = 请求回来的数据// 可以开始发送初始化渲染的请求了},// 2. 挂载阶段（渲染模板）beforeMount () {console.log('beforeMount 模版渲染之前', document.querySelector('h3'.innerHTML))},mounted () {console.log('mounted 模板渲染之后', document.querySelector('h3'.innerHTML))// 可以开始操作dom了},// 3. 更新阶段beforeUpdate () {console.log('beforeUpdate 数据改了，视图还没更新', document.querySelector('span').innerHTML)},updated () {console.log('updated 数据改了，视图已经更新', document.querySelector('span').innerHTML)},// 4. 销毁阶段beforeDestroy () {console.log('beforeDestroy销毁前')console.log('清除掉一些Vue以外的资源占用，如定时器、延时器等等')},destroyed () {console.log('destroyed销毁后')}})</script>
</body></html>

三、运行效果 

注：因为销毁阶段涉及到浏览器的关闭，这里为了演示销毁，在浏览器的控制台里通过调用Vue app实例的destroy()方法。

相关文章：

第十一章 Vue生命周期及生命周期的四个阶段

目录 一、引言 1.1. Vue生命周期的具体阶段 1.2. 每个阶段的具体作用和常用场景 1.3. 生命周期钩子函数 ​二、代码示例 三、运行效果 一、引言 Vue生命周期是指Vue组件实例从创建到销毁的整个过程。在这个过程中&#xff0c;组件经历了一系列的阶段&#xff0c;每个阶段…...

编程日记 2024/10/28 21:31:15

展厅展会客流显示屏的客流统计功能如何实现

随着科技的发展&#xff0c;展厅和展会的管理越来越智能化。客流显示屏作为一种高效的管理工具&#xff0c;能够实时显示参观人数&#xff0c;帮助主办方更好地了解客流情况&#xff0c;优化资源配置。本文将详细介绍展厅展会客流显示屏的客流统计功能如何实现&#xff0c;分为…...

编程日记 2024/10/28 21:30:14

golang正则表达式的使用及举例

正则表达式很强大&#xff0c;在一些场合如抓包&#xff0c;爬虫等方面很有用。在 Go语言中&#xff0c;正则表达式通过标准库 regexp 提供支持。使用正则表达式可以进行字符串匹配、替换和分割等操作。 以下是正则表达式的基本使用方法及示例&#xff1a; 1. 导入 regexp 包 …...

编程日记 2024/10/28 21:29:13

Flutter杂学: iOS 上启用自动填充和关联域

下面是详细的配置和代码&#xff0c;以确保在 iOS 上启用自动填充和关联域&#xff08;Associated Domains&#xff09;功能。 配置步骤 1. 在 Apple Developer 控制台中启用 Associated Domains 登录 Apple Developer。导航至您的 App ID 设置页面。找到您要配置的 App ID&…...

编程日记 2024/10/28 21:27:12

接口自动化-框架搭建（Python+request+pytest+allure）

使用代码如何开展接口自动化测试。 一 选择自动化测试用例 业务流程优先&#xff0c;单接口靠后&#xff0c;功能稳定优先&#xff0c;变更频繁不选。 二 搭建自动化测试环境 &#xff08;1&#xff09;安装python编译器3.7版本以上--自行安装 &#xff08;2&#xff09;安…...

编程日记 2024/10/28 21:26:07

[论文阅读]Constrained Decision Transformer for Offline Safe Reinforcement Learning

Constrained Decision Transformer for Offline Safe Reinforcement Learning Proceedings of the 40th International Conference on Machine Learning (ICML), July 23-29, 2023 https://arxiv.org/abs/2302.07351 泛读只需要了解其核心思想即可。 安全强化学习(Safe Rei…...

编程日记 2024/10/28 21:25:05

工具_Nginx

文章目录 location语法介绍跨域配置https配置http重定向到https配置反向代理配置负载均衡配置upstream配置负载均衡算法&#xff08;1&#xff09;rr轮询&#xff08;默认&#xff09;&#xff08;2&#xff09;wrr加权轮询&#xff08;weight&#xff09;&#xff08;3&#x…...

编程日记 2024/10/28 21:23:02

web开发Model1

WEB开发模式–Model 1 Model1是指基于JSPJavaBean的开发模式&#xff0c;JSP负责web的相关部分&#xff0c;包括数据的展示&#xff0c;请求逻辑的控制等&#xff0c;JavaBean负责业务的逻辑部分&#xff0c;包括数据的存取&#xff0c;业务的实现。 这是我写的一个小项目&…...

编程日记 2024/10/28 21:21:00

ImportError: cannot import name ‘Sequential‘ from ‘keras.models‘

报错信息 ImportError: cannot import name Sequential from keras.models错误代码示例 import tensorflow as tf from keras.models import Sequential # 报错行model Sequential()错误分析 这个错误通常发生在 TensorFlow 和 Keras 的版本不兼容时。TensorFlow 2.x 版本…...

编程日记 2024/10/28 21:19:59

python实战（二）——房屋价格回归建模

一、任务背景 本章将使用一个经典的Kaggle数据集——House Prices - Advanced Regression Techniques进行回归建模的讲解。这是一个房价数据集&#xff0c;与我们熟知的波士顿房价数据集类似&#xff0c;但是特征数量要更多&#xff0c;数据也要更为复杂一些。下面&#xff0c;…...

编程日记 2024/10/28 21:18:58

UHF机械高频头的知识和待学习的疑问

电路图如上所示&#xff1a; 实物开盖清晰图如下&#xff1a; 待学习和弄懂的知识&#xff1a; 这是一个四腔的短路线谐振。分别是输入调谐&#xff0c;放大调谐&#xff0c;变频调谐和本振 第一个原理图输入为75欧&#xff08;应该是面向有同轴线的天线了&#xff09;如下图…...

编程日记 2024/10/28 21:17:57

深入理解 SQL 中的 WITH AS 语法

在日常数据库操作中&#xff0c;SQL 语句的复杂性往往会影响到查询的可读性和维护性。为了解决这个问题&#xff0c;Oracle 提供了 WITH AS 语法&#xff0c;这一功能可以极大地简化复杂查询&#xff0c;提升代码的清晰度。本文将详细介绍 WITH AS 的基本用法、优势以及一些实际…...

编程日记 2024/10/28 21:14:54

同三维T80005JEHA-4K60 4K60超高清HDMI/AV解码器

1路HDMI1路CVBS1路3.5音频输出&#xff0c;HDMI支持4K60&#xff0c;支持1路4K60解码&#xff0c;1路高清转码 产品简介&#xff1a; T80005JEHA-4K60是一款4K60超高清解码器&#xff0c;支持1路HDMI/CVBS解码输出&#xff0c;HDMI支持4K60&#xff0c;适用于各种音视频解决方…...

编程日记 2024/10/28 21:13:53

深信服秋季新品重磅发布：安全GPT4.0数据安全大模型与分布式存储EDS新版本520，助力数字化更简单、更安全

10月23日&#xff0c;深信服举办2024秋季新品发布会。发布会上&#xff0c;深信服正式推出了最新的创新成果&#xff1a;实现动静态数据分类分级和数据风险自动研判分析的安全GPT4.0、具备卓越可靠性和AI勒索防护能力的分布式存储EDS新版本520。通过这些新品和能力&#xff0c;…...

编程日记 2024/10/28 21:12:52

Flutter图片控件（七）

1、加载图片 import package:flutter/material.dart;void main() {runApp(const MaterialApp(home: MyHomePage(),)); }class MyHomePage extends StatelessWidget {const MyHomePage({super.key});overrideWidget build(BuildContext context) {return Scaffold(appBar: AppB…...

编程日记 2024/10/28 21:09:49

JavaEE初阶---文件IO总结

文章目录 1.文件初识2.java针对于文件的操作2.1文件系统的操作---file类2.2文件内容的操作---流对象的分类2.4字符流的操作》文本文件2.4.1异常的说明2.4.2第一种文件内容的读取方式2.4.3第二种读取方式2.4.4close的方法的介绍2.4.5close的使用优化操作2.4.6内容的写入 2.3字节…...

编程日记 2024/10/28 21:08:48

10.28Python_pandas_csv

三、读取CSV文件 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;&#xff1b; CSV 是一…...

编程日记 2024/10/28 21:06:45

数据处理与可视化：pandas 和 matplotlib 初体验（9/10）

数据处理与可视化&#xff1a;pandas 和 matplotlib 初体验&#xff08;9/10&#xff09; 介绍 在如今的数据驱动时代&#xff0c;掌握数据处理与可视化是每个开发者和数据科学家不可或缺的技能。Python 拥有强大的数据处理库 pandas 和数据可视化库 matplotlib&#xff0c;它…...

编程日记 2024/10/28 21:05:41

鸿蒙学习总结

鸿蒙&#xff08;HarmonyOS&#xff09;&#xff0c;做为国产自主研发设计的第一个操作系统&#xff0c;从开放测试以来一直备受关注。其纯血鸿蒙版&#xff08;HarmonyOS NEXT&#xff09;也于进日发布。过去的一段时间里&#xff0c;我站在一个移动开发者的角度对HarmonyOS进…...

编程日记 2024/10/28 21:02:36

如何修改文件创建时间？六个超简单修改方法介绍

怎么修改文件创建时间&#xff1f;在信息安全与隐私保护的领域里&#xff0c;每一个细节都可能成为泄露敏感信息的突破口。文件的创建时间&#xff0c;这个看似微不足道的数据点&#xff0c;实则可能蕴含着重要的时间线索&#xff0c;对于不希望被外界窥探其内容或来源的个人及…...

编程日记 2024/10/28 21:00:35

别再为EVE-ng镜像发愁了！手把手教你从官网下载到VMware部署（附国内加速地址）

EVE-ng网络模拟器全流程实战&#xff1a;从镜像获取到高阶配置 第一次接触网络设备模拟的工程师&#xff0c;往往会在EVE-ng的入门阶段遇到各种"拦路虎"——镜像文件找不到可靠的下载源、导入VMware时配置出错、虚拟网络连接异常。这些问题如果得不到解决&#xff0c…...

编程新知 2026/5/12 0:14:25

如何免费获取全球50+图书馆古籍资源：BookGet数字古籍下载完整指南

如何免费获取全球50图书馆古籍资源&#xff1a;BookGet数字古籍下载完整指南 【免费下载链接】bookget bookget 数字古籍图书下载工具。 项目地址: https://gitcode.com/gh_mirrors/bo/bookget 还在为寻找古籍文献而烦恼吗&#xff1f;想要从哈佛、国会图书馆等全球知名…...

编程新知 2026/5/12 0:00:12

马斯克解散 xAI、接纳 Anthropic：亡羊补牢的无奈，与一场被 AGI 神话带偏的豪赌

马斯克解散 xAI、接纳 Anthropic&#xff1a;亡羊补牢的无奈&#xff0c;与一场被 AGI 神话带偏的豪赌 2026 年 5 月 6 日&#xff0c;两件事同时发生&#xff1a; 一、Anthropic 宣布获得 xAI Colossus 1 集群的全部算力——22 万张英伟达 GPU&#xff0c;300 兆瓦电力容量。 …...

编程新知 2026/5/11 23:21:36

苹果W1芯片如何通过低功耗无线技术重塑TWS耳机体验

1. 无线音频的功耗困局与苹果的破局思路 2016年9月&#xff0c;当苹果在发布会上首次亮出那对剪掉线缆的AirPods时&#xff0c;整个消费电子行业都在问同一个问题&#xff1a;它是怎么做到的&#xff1f;更具体地说&#xff0c;它如何解决了无线耳机领域最核心、也最令人头疼的…...

编程新知 2026/5/11 23:01:04

告别空转！用RT-Thread PM组件给你的IoT设备省电：从投票机制到外设管理的完整指南

告别空转&#xff01;用RT-Thread PM组件给你的IoT设备省电&#xff1a;从投票机制到外设管理的完整指南 在电池供电的物联网设备开发中&#xff0c;功耗优化往往成为决定产品成败的关键因素。想象一下&#xff0c;一个部署在偏远地区的环境监测节点&#xff0c;如果因为功耗问…...

编程新知 2026/5/11 22:43:28

ExplorerPatcher：彻底改造你的Windows界面体验，打造个性化高效工作环境

ExplorerPatcher&#xff1a;彻底改造你的Windows界面体验&#xff0c;打造个性化高效工作环境 【免费下载链接】ExplorerPatcher This project aims to enhance the working environment on Windows 项目地址: https://gitcode.com/GitHub_Trending/ex/ExplorerPatcher …...

编程新知 2026/5/11 22:40:41

从CMake报错到编译成功：一站式解决absl依赖配置难题

1. 当CMake突然报错&#xff1a;absl依赖缺失的紧急处理 第一次看到这个报错时&#xff0c;我正赶着在截止日期前完成gRPC服务的部署。控制台突然弹出的红色错误让我心头一紧&#xff1a;"Could not find a package configuration file provided by absl"。这种依赖缺…...

编程新知 2026/5/11 21:06:19

绝地求生罗技鼠标宏实战指南：5步实现高效压枪技巧

绝地求生罗技鼠标宏实战指南&#xff1a;5步实现高效压枪技巧 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 对于《绝地求生》玩家来说&#xf…...

编程新知 2026/5/11 21:03:34

从零到一：手把手教你搭建MinGW-w64开发环境

1. 为什么需要MinGW-w64开发环境 第一次在Windows上写C代码时&#xff0c;我踩了个大坑&#xff1a;好不容易写完的代码&#xff0c;发现根本没法编译运行。这才意识到Windows不像Linux自带GCC编译器&#xff0c;需要额外搭建开发环境。MinGW-w64就是解决这个问题的神器&#x…...

编程新知 2026/5/11 20:53:09

VLSI时代下74系列离散逻辑芯片的现代应用与设计实践

1. 从“胶水逻辑”到“系统粘合剂”&#xff1a;离散逻辑芯片的现代生存法则 在今天的数字电路设计领域&#xff0c;提起“7400系列”或者“74HC04”&#xff0c;很多年轻工程师的第一反应可能是博物馆里的古董&#xff0c;或者教科书上的历史章节。主流叙事已经被SoC、FPGA和高…...

编程新知 2026/5/11 20:53:08