Vue生命周期:组件的生命之旅

🍃引言

在Vue.js中,每个组件都有其独特的生命周期。这个生命周期指的是组件从创建到销毁的一系列过程。了解并正确使用Vue的生命周期钩子,对于优化组件性能、管理组件状态以及实现特定功能至关重要。本文将详细介绍Vue的生命周期及其各个阶段的用法。

🍃生命周期阶段

Vue组件的生命周期可分为四个阶段:创建阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都有对应的生命周期钩子,这些钩子函数允许我们在组件的不同时刻执行特定的操作。
在这里插入图片描述

🍁创建阶段

在创建阶段,Vue实例被初始化,包括数据属性、计算属性、方法以及侦听器等。这个阶段有两个主要的生命周期钩子:

🍂beforeCreate

在实例初始化之后,数据观测(data observer)和事件/侦听器事件尚未配置之前被调用。此时,无法访问到数据和DOM元素。

🍂created

在实例创建完成后被立即调用。在这一步,实例已完成数据观测,属性和方法的运算,以及事件监听器的配置。但是,挂载阶段尚未开始,$el属性目前不可见。

🍁挂载阶段

挂载阶段是组件与DOM建立关联的过程。此阶段有两个主要的生命周期钩子:

🍂beforeMount

在挂载开始之前被调用,相关的render函数首次被调用。此时,可以访问到数据和DOM元素,但组件尚未渲染成真实的DOM节点。

🍂mounted

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。在这个阶段,可以访问到组件的DOM元素和数据,通常用于执行一些需要依赖DOM的操作,如获取元素宽高、设置动画等。

🍁更新阶段

当组件的数据发生变化时,Vue会进入更新阶段。此阶段包含两个主要的生命周期钩子:

🍂beforeUpdate

数据更新时调用,发生在虚拟DOM打补丁之前。此时可以访问到更新后的数据,但DOM元素尚未更新。

🍂updated

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。此时可以访问到更新后的数据和DOM元素,通常用于执行一些需要依赖最新DOM的操作。

🍁销毁阶段

当组件不再需要时,Vue会进入销毁阶段。此阶段有一个主要的生命周期钩子:

🍂beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用。通常用于执行一些清理操作,如取消定时器、移除事件监听器等。

🍂destroyed

Vue实例销毁后调用。调用后,所有的事件监听器会被移除,所有的子实例也都会被销毁。通常用于执行一些资源释放的操作。

🍃代码示例

<template>  <div>  <h1>{{ message }}</h1>  <button @click="updateMessage">更新消息</button>  </div>  
</template>  <script>  
export default {  data() {  return {  message: "Hello, Vue!"  };  },  beforeCreate() {  console.log("beforeCreate 钩子函数被调用");  },  created() {  console.log("created 钩子函数被调用");  // 可以在这里进行数据的请求和操作  },  beforeMount() {  console.log("beforeMount 钩子函数被调用");  },  mounted() {  console.log("mounted 钩子函数被调用");  // 可以在这里进行一些依赖于DOM的操作  },  beforeUpdate() {  console.log("beforeUpdate 钩子函数被调用");  // 可以在这里进一步地更改状态,这不会触发附加的重渲染过程  },  updated() {  console.log("updated 钩子函数被调用");  // 当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作  },  beforeDestroy() {  console.log("beforeDestroy 钩子函数被调用");  // 可以在这个钩子中进行一些清理工作,例如取消定时器和事件监听器等  },  destroyed() {  console.log("destroyed 钩子函数被调用");  // Vue 实例销毁后调用。调用后,所有的事件监听器会被移除,所有的子实例也都会被销毁。  },  methods: {  updateMessage() {  this.message = "更新后的消息";  }  }  
};  
</script>

这个示例中,我们创建了一个简单的Vue组件,其中包含一个h1标签和一个按钮。在组件的JavaScript部分,我们定义了各个生命周期钩子函数,并在其中打印了相应的日志信息。您可以根据需要在这些钩子函数中添加自己的代码逻辑。当您运行这个组件时,您将在控制台中看到各个钩子函数的调用顺序和日志输出。请注意,在created钩子函数中,我们提到可以在这里进行一些数据的请求和操作。在mounted钩子函数中,我们提到可以在这里进行一些依赖于DOM的操作。

🍃总结

了解并正确使用Vue的生命周期钩子,对于优化组件性能、管理组件状态以及实现特定功能至关重要。通过在不同的生命周期阶段执行适当的操作,我们可以确保组件在适当的时机进行渲染、更新和销毁,从而实现更高效、更健壮的Vue应用程序。在实际开发中,我们需要根据具体需求选择合适的生命周期钩子来实现相应的功能。


🏫博客主页:魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/188804.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot+Redis编写一个抢红包雨的案例。附源码。

案例演示 SpringBootRedis编写一个抢红包雨的案例。附源码 1、案例分析&#xff0c;整体方案介绍 预备上线一个红包雨活动。这个红包雨的思路是活动开始前25分钟&#xff0c;在后台创建活动。然后前端用户进入&#xff0c;到点后将设置的金额拆分成多个小红包&#xff0c;开启倒…

转向更卷的奶茶 库迪这是要在咖啡上认怂?

卖咖啡刚满一年&#xff0c;陆正耀就带着名为“茶猫”的奶茶项目再度登场。 根据多位网友的爆料&#xff0c;茶猫采取和库迪咖啡一样的联营商模式&#xff0c;且有低价补贴策略&#xff0c;主打低价茶饮市场&#xff0c;全场统一定价6.9元。 熟悉的加盟模式&#xff0c;熟悉的…

使用type实现接口继承效果

如何使用type实现接口继承的效果 接口继承的写法 // 接口继承 interface Person {name: stringage: numberhobby?: string say: (content: string) > void } interface Student extends Person {score: number }使用 type 模拟 interface的继承效果 // 使用type实现类似…

CSS选择器十二种方法

相信大家对元素应该是不陌生的&#xff0c;当我们页面中&#xff0c;我们想要布局&#xff0c;给元素添加样式的时候&#xff0c;我们应该怎么获取到指定元素呢&#xff1f; 优先级&#xff1a;ID 选择器 > 类选择器 > 标签选择器 > 通配符 1.元素选择器 通过标签名…

基于springboot+vue的秒杀商城(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

这是怎么了?继阿里11月故障后,淘宝这个问题20 天了还未修复!

继11月12号&#xff0c;阿里云发生大面积故障故障以来&#xff0c;已经过去了近 20天&#xff0c;但是截止到发文时间&#xff0c;作者发现淘宝还有部分功能存在问题&#xff0c;没法正常使用。 难道真是降本增笑&#xff0c;开猿截流&#xff0c;导致没有相关负责人员了&…

业余爱好-社会工程管理记账报税

税务问题笔记 印花税税费申报及缴纳财务和行为税合并纳税申报增值税及附加税费申报企业所得税季度A类申报残疾人就业保障金申报财务报表个税申报 印花税 印花税是对在经济活动和经济交往中书立、领受具有法律效力的凭证的行为征收的一种税。 税费申报及缴纳 财务和行为税合并…

LeetCode Hot100 75.颜色分类

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 so…

CentOS 7安装Java 8

前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 要在CentOS 7上安装Java 8&#xff0c;请按照以下步骤操作&#xff1a; 打开终端并以root身份登录。 更新系统软件包&#xff1a; …

大数据:Hadoop刷题

大数据&#xff1a;Hadoop刷题 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sql要…

Day04:每日一题:2661. 找出叠涂元素

2661. 找出叠涂元素 给你一个下标从 0 开始的整数数组 arr 和一个 m x n 的整数 矩阵 mat 。 arr 和 mat 都包含范围 [1&#xff0c;m * n] 内的 所有 整数。从下标 0 开始遍历 arr 中的每个下标 i &#xff0c;并将包含整数 arr[i] 的 mat 单元格涂色。请你找出 arr 中在 mat…

【PixPin】媲美QQ/Snipaste截图贴图OCR工具

PixPin PixPin是一款截图工具&#xff0c;它集成了截图、长截图、贴图、标注、OCR识别等众多功能&#xff0c;软件体积小巧&#xff0c;使用简单&#xff0c;是一款非常棒的截图工具。之前使用过Snipaste工具的小伙伴用起来应该是得心应手。 从左往右的功能依次是&#xff1a;…

jetson nano网络配置(有线、无线、USB)

文章目录 网络配置&#xff08;有线、无线&#xff09;1.前言1.1 RJ451.2 无线网卡 2.有线连接2.1 连接方法2.2 检测连接状态 3.无线3.1 网卡安装步骤3.2 连接方法3.3 检测连接状态 4.通过USB 线控制Jetson Nano4.1 连接4.2 查看设备4.3 查看设备IP 网络配置&#xff08;有线、…

ThinkPHP 2.x任意代码执行漏洞

任务一&#xff1a; 复现环境中的代码漏洞 任务二&#xff1a; 尝试利用代码执行漏洞读取服务器web目录下的文件列表。 任务一&#xff1a; 1.搭建环境&#xff1a; 2.在php环境下直接输入{${phpinfo}}测试代码片段 2.写入一句话木马&#xff0c;用antsword连接&#xff0…

【Java8系列07】Java8日期处理

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nodejs_vue+vscode美容理发店会员管理系统un1dm

按照设计开发一个系统的常用流程来描述系统&#xff0c;可以把系统分成分析阶段&#xff0c;设计阶段&#xff0c;实现阶段&#xff0c;测试阶段。所以在编写系统的说明文档时&#xff0c;根据系统所处的阶段来描述系统的内容。 绪论&#xff1a;这是对选题的背景&#xff0c;意…

停止在 TypeScript 中使用 any 类型

停止在 TypeScript 中使用 any 类型 TypeScript 是 Web 开发人员中最常用的编程语言之一。它具有出色的语言功能&#xff0c;允许我们轻松设计可扩展的应用程序。因此&#xff0c;开发人员倾向于在项目中选择 TypeScript 而不是 JavaScript。 然而&#xff0c;在使用 TypeScr…

Python全栈之基本数据类型详解

文章目录 1.注释2.输出3.变量4.命名规范5.变量的定义方式1.字符串类型2.数字类型3.List列表类型4.tuple 元组类型的定义5.Dict字典类型6.set集合类型7.数据类型转换8.自动类型转换9.强制类型转换关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品…

《opencv实用探索·七》一文看懂图像卷积运算

1、图像卷积使用场景 图像卷积是图像处理中的一种常用的算法&#xff0c;它是一种基本的滤波技术&#xff0c;通过卷积核&#xff08;也称为滤波器&#xff09;对图像进行操作&#xff0c;使用场景如下&#xff1a; 模糊&#xff08;Blur&#xff09;&#xff1a; 使用加权平…

模糊C均值(Fuzzy C-means,FCM)聚类的可运行的python程序代码,复制即可用!!切记需要安装库 scikit-fuzzy

文章目录 前言一、安装库 scikit-fuzzy二、具体程序代码&#xff08;复制可运行&#xff09;三、结果展示总结 前言 模糊C均值&#xff08;Fuzzy C-means&#xff0c;FCM&#xff09;聚类是一种软聚类方法&#xff0c;它允许数据点属于多个聚类&#xff0c;每个数据点对所有聚…