Vue中的组件生命周期

news2025/1/19 11:21:31

一个组件从创建到销毁的过程 成为生命周期。
在我们使用Vue3 组合式API 是没有 beforeCreate 和 created 这两个生命周期的

组件生命周期如下:

在这里插入图片描述

  • onBeforeMount() 在组件DOM实际渲染安装之前调用。在这一步中,根元素还不存在。
  • onMounted() 在组件的第一次渲染后调用,该元素现在可用,允许直接DOM访问
  • onBeforeUpdate() 数据更新时调用,发生在虚拟 DOM 打补丁之前。
  • onUpdated() DOM更新后,updated的方法即会调用。
  • onBeforeUnmount() 在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。
  • onUnmounted() 卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
选项API 和组合式API钩子对比
选项式API组合式API
beforeCreateNot needed*
createdNot needed*
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated

代码示例:

<template>
   <h3>我是组件</h3>
   <div ref="div">{{str}}</div>
   <button @click="change">修改str</button>
</template>
<script setup lang="ts">
import { ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue';
const str=ref<string>('我是大漂亮');
console.log(str);
const div=ref<HTMLDivElement>();
const change=()=>{
   str.value='小可爱';
}
onBeforeMount(()=>{
   console.log('创建前',div.value);
})
onMounted(()=>{
   console.log('挂载完成',div.value);
})
onBeforeUpdate(()=>{
   console.log('更新前')
})
onUpdated(()=>{
   console.log('更新完成')
})
onBeforeUnmount(()=>{
   console.log('卸载之前')
})
onUnmounted(()=>{
   console.log('卸载完成')
})
</script>
<style scoped>
</style>

页面加载完成:
Ref<“我是大漂亮”>
创建前 undefined
挂载完成

<div>小可爱</div>"
点击button后:

控制台打印:
更新前
更新完成

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

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

相关文章

【手把手】教你玩转SpringCloud Alibaba之Sentinel整合GateWay

1、网关流控介绍 在微服务系统中&#xff0c;网关提供了微服务系统的统一入口&#xff0c;所以在做限流的时候&#xff0c;肯定是要在网关层面做一个流量的控制&#xff0c;Sentinel 支持对 Spring Cloud Gateway、Zuul 等主流的 API Gateway 进行限流。 Sentinel 1.6.0 引入…

R语言隐马尔可夫模型HMM识别不断变化的市场条件

了解不同的市场状况如何影响您的策略表现可能会对您的收益产生巨大的影响。最近我们被客户要求撰写关于隐马尔可夫模型的研究报告&#xff0c;包括一些图形和统计输出。 某些策略在波动剧烈的市场中表现良好&#xff0c;而其他策略则需要强劲而平稳的趋势&#xff0c;否则将面…

【PdgCntEditor】解决PDF的目录页码和PDF实际页码不一致的问题,书签页码偏移页面偏移功能,PDF页面标签的添加

一、问题背景 大部分的图书对应的PDF&#xff0c;目录中的页码并非PDF中直接索引的页码&#xff0c;两者之间存在一定的偏移值&#xff1b;导致我们看目录后面的页码&#xff0c;并不能直接借此数字索引到对应页面&#xff0c;非常麻烦。 二、改变页码标签 这是第一种方法&…

电脑技巧:Win10粘贴文件到C盘提示没有权限的解决方法

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

VMware升级手册

1. 概述 1.1 实施范围 本次实施涉及上海SMVIC虚拟化平台的7台物理服务器、7台ESXI节点、一台VC(6.7升级到7.0),以及广德、如皋两个集群迁移到7.0VC。 1.2 实施内容 本项目中需要实施内容包括: 2. 前置准备 升级确认: 3. WBS 4. 实施过程 4.1 VC部署 运行安装包,点击…

R语言生存分析数据分析可视化案例

目标 本文的目的是对如何在R中进行生存分析进行简短而全面的评估。关于该主题的文献很广泛&#xff0c;仅涉及有限数量的&#xff08;常见&#xff09;问题。最近我们被客户要求撰写关于生存分析的研究报告&#xff0c;包括一些图形和统计输出。 可用的R包数量反映了对该主题的…

SpringBoot 配置文件这样加密,才足够安全!

1. 前景 在使用Springboot时&#xff0c;通常很多信息都是在application.yml中直接明文配置的&#xff0c;比如数据库链接信息&#xff0c;redis链接信息等等。但是这样是不安全的。 所以需要对敏感数据进行加密&#xff0c;这样防止密码泄露 Jasypt这个库为我们解决了这个问…

[附源码]计算机毕业设计springboot-大学生健康档案管理

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

初识Pytest自动化测试框架,我彻底懂了

初识Pytest Pytest是Python实现的一个测试工具&#xff0c;可以用于所有类型和级别的软件测试。 Pytest是一个可以自动查找到你编写的用例并运行后输出结果的测试框架。 Pytest的特点&#xff1a; 是一个命令行工具&#xff0c;编写用例简单&#xff0c;可读性强非常容易上手…

2023年高企申报准备工作,明光市企业可以提前做这些准备

为了帮助企业提前准备和更好地开展2023年高新技术企业认定申报工作&#xff0c;安徽省大力鼓励企业申报高新技术企业&#xff0c;相应出台了相关政策&#xff0c;同时对于高企申报也有很多奖补&#xff0c;下面小编汇总了滁州市2023年申报&#xff0c;企业提前准备工作有哪些。…

黑群晖从入门到入土,自编译适合自己硬件的黑群晖7.1.x引导(黑群晖DSM7.X引导用arpl编译教程)

写在前面的话 没啥好说的&#xff0c;只需要感谢在GitHub上开源代码的巴西老哥就好&#xff0c;好了废话不多说直接开始。 黑群晖DSM7.X引导用arpl编译教程写在前面的话一、需要的软硬件清单二、制作引导盘1、下载arpl镜像2.1.1、制作PE启动盘&#xff0c;这是使用msata硬盘或…

3. Vue.js 3.0 响应式系统原理

1.响应式系统原理-介绍 接下来通过模拟Vue3的响应式系统来深入了解它内部的工作原理。先来回顾一下Vue3重写了响应式系统&#xff0c;和Vue2相比&#xff0c;Vue3的响应式系统底层采用proxy对象实现&#xff0c;在初始化的时候不需要遍历所有的属性&#xff0c;把属性通过defi…

C语言——结构体(入门)

文章目录1.结构体的声明1.1.结构体是什么&#xff1f;1.2.结构体的声明1.3.结构体的定义和初始化2.结构体成员的访问3.结构体传参1.结构体的声明 1.1.结构体是什么&#xff1f; 在生活中往往很难用一个准确的数据类型来描述一个物体&#xff0c;例如一本书&#xff0c;描述它…

编码技巧——Mybatis分页插件PageHelper使用

本篇介绍Mybatis分页插件PageHelper的使用&#xff0c;本质上是Mybatis拦截器起作用&#xff0c;在执行目标SQL之前添加count语句及拼接limit到目标SQL后面&#xff0c;这里不再赘述&#xff0c;Mybatis拦截器相关知识可参考Mybatis——拦截器Interceptor&#xff0c;本篇仅简单…

12_AJAX

知识点1【定时器】&#xff08;重要&#xff09; 知识点2【日期Date对象】 知识点3【Math数学对象】&#xff08;了解&#xff09; ​编辑 知识点4【string对象】 indexof函数&#xff1a; substring()函数&#xff1a; 知识点5【全局函数】&#xff08;了解&#xff09; …

Android使用高德地图实现运动轨迹绘制和轨迹回放

功能的实现完全是使用高德地图进行实现的&#xff0c;先看一下效果图吧&#xff01; 下图是在绘制轨迹的过程&#xff1a; 下图是在轨迹回放的过程&#xff1a; 下图是记录运动的时间区间&#xff1a; 其实这个实现起来还是很容易的&#xff0c;总体逻辑就是&#xff1a;定位—…

Meter接口测试使用教程哪里找?

接口测试是测试工程师的必备技能之一&#xff0c;运用JMeter工具一步步实现接口请求&#xff0c;数据参数化&#xff0c;断言等操作&#xff0c;通过常见的企业实际测试场景详解JMeter各项技术使用&#xff0c;最后结合Jenkins持续集成实现企业级小程序接口自动化测试&#xff…

数据结构(6)树形结构——平衡二叉树(JAVA代码实现)

目录 6.1.概述 6.2.AVL树 6.2.1.概述 6.2.2.旋转 1.RR旋转 2.LL旋转 3.LR旋转 4.RL旋转 6.2.3.代码实现 6.1.概述 二叉搜索树存在一个问题&#xff0c;就是树的姿态和数据的插入顺序是有关系的&#xff0c;有时候树会变成某一边的子树高度过高&#xff0c;甚至直接退化成…

百度联合哈尔滨发布城市大模型“冰城-百度·文心”, 助力城市智能化建设

本文已在【飞桨PaddlePaddle】公众号平台发布&#xff0c;详情请戳链接&#xff1a;百度联合哈尔滨发布城市大模型“冰城-百度文心”&#xff0c; 助力城市智能化建设 近日&#xff0c;哈尔滨市人民政府与百度携手&#xff0c;联合发布面向城市领域的行业大模型——冰城-百度文…

PyTorch学习笔记-损失函数与反向传播

1. 损失函数 具有深度学习理论基础的同学对损失函数和反向传播一定不陌生&#xff0c;在此不详细展开理论介绍。损失函数是指用于计算标签值和预测值之间差异的函数&#xff0c;在机器学习过程中&#xff0c;有多种损失函数可供选择&#xff0c;典型的有距离向量&#xff0c;绝…