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

[Vue学习]生命周期及其各阶段举例

        当我们运行vue项目,看到了屏幕上显示的界面,看到了界面上显示的数据和标签,之后将这个界面叉掉,这一过程其实经历了一整个vue的生命周期的四个阶段,即创建阶段、挂载阶段、更新阶段以及销毁阶段, 而对于每个阶段的启动前和完成后,都可以使用一对钩子来访问。

一、创建阶段 (beforeCreate/created两钩子)

  • beforeCreate:在实例初始化之后,数据观测 和 事件/侦听器的配置之前被调用。此时,组件的 datacomputedwatchmethods 上的方法和数据都不可访问,例如我提前在data中定义了一个变量,在该阶段访问它,只会获得空值。
  • created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测,属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
<template>  <div>{{ message }}</div>  
</template>  <script>  
export default {  data() {  return {  message: 'Hello Vue!'  }  },  beforeCreate() {  console.log('beforeCreate:', this.message); // undefined,因为data还未初始化  // 这里可以初始化一些不需要依赖data或methods的属性  },  created() {  console.log('created:', this.message); // Hello Vue!,此时data已初始化  // 这里可以调用API,获取数据等  this.fetchData();  },  methods: {  fetchData() {  // 模拟异步获取数据  setTimeout(() => {  // 假设这里是从服务器获取的数据  const newData = 'New message from server';  // 注意:直接修改data属性会触发视图更新  this.message = newData;  }, 1000);  }  }  
}  
</script>

二、挂载阶段 (beforeMount/mounted)

  • beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
  • mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

<template>  <div ref="myDiv">{{ message }}</div>  
</template>  <script>  
export default {  data() {  return {  message: '存储的内容'  }  },  beforeMount() {  // 这里的$el存在,但内容还是模板字符串  console.log('beforeMount:', this.$el.textContent); // 可能是空字符串或注释  },  mounted() {  // 组件已挂载到DOM上,可以访问到DOM元素  console.log('mounted:', this.$refs.myDiv.textContent); // Hello Vue in DOM!  // 可以在这里操作DOM,如添加事件监听器等  this.$refs.myDiv.addEventListener('click', this.handleClick);  },  methods: {  handleClick() {  console.log('myDiv被点击了');  }  },  beforeDestroy() {  // 清理事件监听器,避免内存泄漏  this.$refs.myDiv.removeEventListener('click', this.handleClick);  }  
}  
</script>

三、更新阶段(beforeUpdate/updated)

  • beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。(我要更新了,但是更新时发现有个东西要更新,之后更新这个东西,但是又发现这个东西要更新,然后又又更新......无限循环)

<template>  <div>{{ counter }}</div>  <button @click="increment">Increment</button>  
</template>  <script>  
export default {  data() {  return {  counter: 0  }  },  beforeUpdate() {  console.log('beforeUpdate:', this.counter); // 更新前的值  //此时DOM还未更新  },  updated() {  console.log('updated:', this.counter); // 更新后的值  // 可以在这里执行依赖于DOM的操作,但要避免引起无限更新循环  },  methods: {  increment() {  this.counter++;  }  }  
}  
</script>

四、销毁阶段(beforeDestroy/destroyed)

 在这个阶段,Vue 实例将从 DOM 中卸载,并且清理所有的绑定和事件监听。

  • beforeDestroy(): 在实例销毁之前调用。这时实例仍然完全可用。

  • destroyed(): 在实例销毁后调用。调用之后,Vue 实例上的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

销毁阶段的代码我已经融入到前三个阶段的代码中,在此不再展示.

整个流程:
beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

相关文章:

[Vue学习]生命周期及其各阶段举例

当我们运行vue项目&#xff0c;看到了屏幕上显示的界面&#xff0c;看到了界面上显示的数据和标签&#xff0c;之后将这个界面叉掉&#xff0c;这一过程其实经历了一整个vue的生命周期的四个阶段&#xff0c;即创建阶段、挂载阶段、更新阶段以及销毁阶段, 而对于每个阶段的启动…...

YOLOv5改进 | 损失函数 | EIoU、SIoU、WIoU、DIoU、FocuSIoU等多种损失函数

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录&#xff1a; 《YOLOv5入门 …...

[leetcode]minimum-absolute-difference-in-bst 二叉搜索树的最小绝对差

. - 力扣&#xff08;LeetCode&#xff09; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(null…...

[ALSA]从零开始,使用ALSA驱动播放一个音频

前言 最近学了不少有关音频相关的&#xff0c;最近搞一下ALSA驱动 安装 参考Linux应用开发【第八章】ALSA应用开发 中提到的ALSA库及工具章节&#xff0c;本文中有比较详细的有关ALSA驱动引用程序怎么安装的&#xff0c;这里不再赘述。 关于ALSA&#xff0c;就当成一个音频…...

自动化设备上位机设计 一

目录 一 设计原型 二 后台代码 一 设计原型 二 后台代码 namespace 自动化上位机设计 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){}} }namespace 自动化上位机设计 {partial class Fo…...

tampermonkey插件下载国家标准文件

#创作灵感# 最近在一个系统招标正文中看到了一些国家标准&#xff0c;想要把文章下载下来&#xff0c;方便查阅&#xff0c;但是“国家标准全文公开系统”网站只提供了在线预览功能&#xff0c;没有提供下载功能&#xff0c;但是公司又需要文件&#xff0c;在网上找了一些办法&…...

JAVA学习笔记2

一、加号使用 二、数据类型 bit&#xff1a;计算机中的最小存储单位 byte(字节):计算机中基本存储单元&#xff0c;1byte8bit 浮点数符号位指数位尾数位 浮点数默认为double类型...

Unity 解包工具(AssetStudio/UtinyRipper)

文章目录 1.UtinyRipper2.AssetStudio 1.UtinyRipper 官方地址&#xff1a; https://github.com/mafaca/UtinyRipper/ 下载步骤&#xff1a; 2.AssetStudio 官方地址&#xff1a; https://github.com/Perfare/AssetStudio 下载步骤&#xff1a;...

log4j2 对定时异步线程打印的日志进行过滤

log4j2的过滤器有&#xff1a; 官网&#xff1a;Log4j – Log4j Filters (apache.org) 本次不使用自定义的过滤器&#xff0c;使用ScriptFilter对logevent对象中的线程名称进行过滤。 具体修改如下&#xff1a; <!--控制台--><Console name"Console" tar…...

Oracle内部bug导致的19c DG备库宕机

Oracle内部bug导致的19c DG备库宕机 报错信息收集原因与受影响版本Workaround与解决办法报错信息收集 数据库版本: SQL> select banner,banner_full,banner_legacy from v$version;BANNER ----------------------------------------------------------------------------…...

2024 世界人工智能大会暨人工智能全球治理高级别会议全体会议在上海举办,推动智能向善造福全人类

2024 年 7 月 4 日&#xff0c;2024 世界人工智能大会暨人工智能全球治理高级别会议-全体会议在上海世博中心举办。联合国以及各国政府代表、专业国际组织代表&#xff0c;全球知名专家、企业家、投资家 1000 余人参加了本次会议&#xff0c;围绕“以共商促共享&#xff0c;以善…...

【算法专题--栈】用栈实现队列 -- 高频面试题(图文详解,小白一看就懂!!)

目录 一、前言 二、题目描述 三、解题方法 ⭐双栈 模拟 队列 &#x1f95d;栈 和 队列 的特性 &#x1f34d;具体思路 &#x1f34d;案例图解 四、总结与提炼 五、共勉 一、前言 用栈实现队列 这道题&#xff0c;可以说是--栈专题--&#xff0c;最经典的一道题&…...

2024亚太杯中文赛B题全保姆教程

B题 洪水灾害的数据分析与预测 问题 1. 请分析附件 train.csv 中的数据&#xff0c;分析并可视化上述 20 个指标中&#xff0c;哪 些指标与洪水的发生有着密切的关联&#xff1f;哪些指标与洪水发生的相关性不大&#xff1f;并 分析可能的原因&#xff0c;然后针对洪水的提前预…...

穿越光影,共赏中华瑰宝——皮影戏文化交流盛会

2024年7月3日&#xff0c;皮影不离团队的成员非常荣幸能与外国语学院的同学以及留学生一同探索中国古老而迷人的艺术形式——皮影戏。皮影戏&#xff0c;源自中国民间&#xff0c;距今已有数千年的历史&#xff0c;它不仅是光与影的魔术&#xff0c;更是文化传承的活化石。 在这…...

SQL常用经典语句大全

SQL经典语句大全 一、基础 1、说明&#xff1a;创建数据库 CREATE DATABASE database-name 2、说明&#xff1a;删除数据库 drop database dbname 3、说明&#xff1a;备份sql server — 创建 备份数据的 device USE master EXEC sp_addumpdevice ‘disk’, ‘testBack’, ‘c:…...

黑马点评DAY5|商户查询缓存

商户查询缓存 缓存的定义 缓存就是数据交换的缓冲区&#xff08;Cache&#xff09;&#xff0c;是存储数据的临时地方&#xff0c;一般读写性能较高。 比如计算机的CPU计算速度非常快&#xff0c;但是需要先从内存中读取数据再放入CPU的寄存器中进行运算&#xff0c;这样会限…...

Owl 中的 Props 概述

在动态的 Web 开发环境中&#xff0c;创建模块化和可重用组件对于构建可扩展应用程序至关重要。将这种方法提升到新水平的一个框架是 Owl&#xff0c;其中“props”&#xff08;属性的缩写&#xff09;的概念在协调父组件和子组件之间的通信中起着关键作用。在 Owl 框架中&…...

【大数据综合试验区1008】揭秘企业数字化转型:大数据试验区政策数据集大公开!

今天给大家分享的是国内顶级期刊中国工业经济2023年发布的最新期刊《政策赋能、数字生态与企业数字化转型——基于国家大数据综合试验区的准自然实验》文章中所使用到的数据集——国家大数据综合试验区政策数据集以及工具变量数据&#xff0c;该文章基于2009-2019年中国上市企业…...

在 WebGPU 与 Vulkan 之间做出正确的选择(Making the Right Choice between WebGPU vs Vulkan)

在 WebGPU 与 Vulkan 之间做出正确的选择&#xff08;Making the Right Choice between WebGPU vs Vulkan&#xff09; WebGPU 和 Vulkan 之间的主要区别WebGPU 是什么&#xff1f;它适合谁使用&#xff1f;Vulkan 是什么&#xff1f;它适合谁使用&#xff1f;WebGPU 和 Vulkan…...

亚马逊云服务器的价格真的那么贵吗?一年要花多少钱?

亚马逊Web服务&#xff08;AWS&#xff09;作为全球领先的云计算平台&#xff0c;其定价策略常常引起用户的关注。很多人可能会问&#xff1a;"AWS真的那么贵吗&#xff1f;"实际上&#xff0c;这个问题的答案并不是简单的"是"或"否"&#xff0c…...

4阶段构建企业级离线文档处理平台:从问题诊断到性能优化全指南

4阶段构建企业级离线文档处理平台&#xff1a;从问题诊断到性能优化全指南 【免费下载链接】WeKnora LLM-powered framework for deep document understanding, semantic retrieval, and context-aware answers using RAG paradigm. 项目地址: https://gitcode.com/GitHub_Tr…...

MMC模块化多电平换流器Simulink仿真模型:N=10子模块的载波移相调制与多控制策略应用

MMC模块化多电平换流器&#xff0c;MMC-HVDC直流输电系统&#xff0c;单个桥臂N10个子模块&#xff0c;采用载波移相调制 simulink仿真模型。 为了测试控制性能良好&#xff0c;在1s时&#xff0c;额定有功功率10e6增加到15e6。 子模块电压2000V&#xff0c;直流电压20KV。 定有…...

疯了!用 AI 做销售,一人能干三人活,效率直接拉满!

一、AI 秒出全场景话术&#xff0c;告别绞尽脑汁从破冰开场、持续跟进&#xff0c;到异议处理、逼单成交&#xff0c;AI 都能根据产品、客户、场景一键生成专业话术。新人不用死记硬背&#xff0c;复制粘贴就能专业沟通&#xff1b;老人不用反复修改&#xff0c;节省大把时间&a…...

无人机飞控入门:如何理解Pixhawk/PX4里的那个“六自由度模型”?

无人机飞控入门&#xff1a;从代码视角理解PX4的六自由度模型 当你第一次打开PX4的EKF2&#xff08;扩展卡尔曼滤波&#xff09;模块代码时&#xff0c;那些关于body_frame、earth_frame和angular_rates的变量命名是否让你感到困惑&#xff1f;这些看似抽象的术语背后&#xff…...

在大厂工作,一旦开窍后,你会爽死…

在职场尤其是大厂里&#xff0c;沟通能力往往比硬实力更能决定你的发展节奏。很多时候&#xff0c;同样一件事&#xff0c;不同的说法&#xff0c;会带来完全不同的结果。下面这8个高频职场场景&#xff0c;对应的高情商话术&#xff0c;帮你轻松化解尴尬、刷好感&#xff0c;还…...

Dockle在大型项目中的应用:多镜像批量扫描与报告生成完整指南

Dockle在大型项目中的应用&#xff1a;多镜像批量扫描与报告生成完整指南 【免费下载链接】dockle Container Image Linter for Security, Helping build the Best-Practice Docker Image, Easy to start 项目地址: https://gitcode.com/gh_mirrors/do/dockle Dockle是一…...

别再瞎调优先级了!STM32CubeMX配置FreeRTOS任务调度器的5个实战避坑点

别再瞎调优先级了&#xff01;STM32CubeMX配置FreeRTOS任务调度器的5个实战避坑点 刚接触FreeRTOS的嵌入式开发者&#xff0c;往往会在STM32CubeMX的图形化配置界面里迷失方向。那些看似简单的下拉菜单和复选框&#xff0c;背后却藏着让系统崩溃的陷阱。我曾见过一个工程师将任…...

错误处理与HTTP状态码:Zalando RESTful API Guidelines 的异常管理机制

错误处理与HTTP状态码&#xff1a;Zalando RESTful API Guidelines 的异常管理机制 【免费下载链接】restful-api-guidelines A model set of guidelines for RESTful APIs and Events, created by Zalando 项目地址: https://gitcode.com/gh_mirrors/re/restful-api-guideli…...

基于H5的初学开发

目标&#xff1a;​ 1.能搭出页面​ 2.能看懂基本标签​ 3.能做表单​ 4.能放图片、音频、视频​ 5.能做简单画布效果​ 6.能做一个 AI Photo Booth 静态演示页​ 7.每个实验做完都能看到结果&#xff0c;不容易卡死 开发工具&#xff1a;VS Cod 本实验覆盖哪些 H5 内容​ 1.h…...

小觅相机‘凉了’之后,我们如何用它的SDK和开源工具链构建自己的SLAM数据集?

从废弃硬件到研究利器&#xff1a;小觅相机SDK与开源工具链的SLAM数据集构建指南 当一款硬件产品的厂商突然消失&#xff0c;官网关闭、技术支持中断&#xff0c;那些被遗弃的设备往往会被贴上"电子垃圾"的标签。但作为一名SLAM研究者或爱好者&#xff0c;你是否想过…...