Vue3选项式和组合式生命周期说明

生命周期:composition

生命周期先后顺序为:

setup -beforeCreate和created的统称,只在composition里面取消这两个,可以在这里进行数据请求

onBeforeMount-挂载前,可以请求后台数据

onMounted-挂载,可以获取DOM实例

onBeforeUpdate-更新前,可以在此更改数据

onUpdated-更新,可以获取到更新后的实例,避免在此期间更改数据,因为这可能会导致无限循环的更新

onBeforeUnmount-卸载组件实例之前,在这里可以清除定时器、监听之类的函数

onUnmounted-卸载组件实例之后,这个时候只剩下了 DOM 空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

onErrorCaptured-捕获组件中发生的错误:组件渲染、事件处理器、生命周期钩子、 setup() 函数、侦听器、自定义指令钩子、过渡钩子

<template><div ref="el" class="home">{{ title }}</div><el-button @click="updateSize">改变</el-button>
</template>
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onErrorCaptured, onMounted, onUnmounted, onUpdated, ref } from 'vue';
​
// 生命周期钩子
const el = ref()
const title = ref('生命周期钩子的使用')
const colors = ['#FF66FF', '#FF0033', '#66CCCC', '#990066', '#00CC00']
// 注册一个回调函数,在组件挂载完成后执行
let intervalId
​
// 注册一个钩子,在组件被挂载之前被调用。
// 当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
onBeforeMount(() => {console.log('onBeforeMount')title.value = '注册一个钩子'
})
​
onMounted(() => {console.log('onMounted')el.value.style.fontSize = '20px'intervalId = setInterval(() => {console.log('测试')}, 1000)
})
​
// 注册一个钩子,在组件实例被卸载之前调用。
onBeforeUnmount(() => {console.log('onBeforeUnmount')
})
​
// 注册一个回调函数,在组件实例被卸载之后调用
onUnmounted(() => {console.log('onUnmounted')clearInterval(intervalId)
})
// 注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用
onUpdated(() => {console.log('点击了');console.log('onUpdated')const nowNum = parseInt(Math.random() * 5)// console.log('colors[nowNum]', colors[nowNum])el.value.style.color = colors[nowNum]
})
​
// 注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用
// 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
onBeforeUpdate(() => {console.log('onBeforeUpdate')title.value = '哈哈哈'
})
// 注册一个钩子,在捕获了后代组件传递的错误时调用。
/*** 错误可以从以下几个来源中捕获:组件渲染事件处理器生命周期钩子setup() 函数侦听器自定义指令钩子过渡钩子这个钩子带有三个实参:错误对象、触发该错误的组件实例,以及一个说明错误来源类型的信息字符串。*/
onErrorCaptured((obj, component, msg) => {console.log('onErrorCaptured', obj, component, msg)
})
​
const updateSize = () => {// console.log(``)const num =parseInt(Math.random() * 100)title.value = `生命周期钩子的使用-${num}`
}
​
</script>
<style lang="scss" scoped>
​
</style>
生命周期:options

生命周期先后顺序为:

setup -beforeCreate和created的统称,只在composition里面取消这两个,可以在这里进行数据请求

beforeCreate-创建实例后的第一个钩子,在这里data、watch、computed等都不可用

created-完成数据观测,可以在这里请求数据,data、watch、computed等都可用

beforeMount-挂载前,可以请求后台数据

mounted-挂载,可以获取DOM实例

beforeUpdate-更新前,可以在此更改数据

updated-更新,可以获取到更新后的实例,避免在此期间更改数据,因为这可能会导致无限循环的更新

beforeUnmount-卸载组件实例之前,在这里可以清除定时器、监听之类的函数

unmounted-卸载组件实例之后,这个时候只剩下了 DOM 空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。

<template><div>options</div>
</template>
​
<script>
export default {setup () {console.log('setup');return {}},beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},beforeUnmount() {console.log('beforeUnmount');},unmounted() {console.log('unmounted');},
}
</script>
​
<style lang="scss" scoped>
​
</style>

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

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

相关文章

期权(1):基本概念,权利金,定金,买方,卖方,零和游戏,对赌协议

期权是合约&#xff0c;权利金就是定金&#xff01; 合约到期时 买方可以选择行权&#xff0c;也可以选择不行权。代价就是定金损失。因此亏损封顶&#xff0c;但盈利无限。卖方赚的就是买方的定金&#xff0c;盈利封顶&#xff0c;但亏损无限。 从这里&#xff0c;我们看出…

C语言例题42、打印金字塔

#include <stdio.h>void main() {int i, j;for (i 0; i < 5; i) {for (j 4; j > i; j--) {//输出空格printf(" ");}for (j 0; j < 2 * i 1; j) {//输出星号printf("* ");}printf("\n");} }运行结果&#xff1a; 本章C语言经…

HTML5实现简洁好看的个人主页,个人小站(多种风格附源码)

文章目录 1.烟灰主题个人主页1.1 个人主页界面1.2 个人信息界面1.3 兴趣爱好界面1.4 个人作品界面 2.紫霞主题个人主页2.1 个人主页界面2.2 个人信息界面2.3 兴趣爱好界面2.4 个人作品界面 3.墨夜主题个人主页3.1 个人主页界面3.2 个人信息界面3.3 兴趣爱好界面3.4 个人作品界面…

优雅谈论大模型5: RAG

RAG 众所周知&#xff0c;大模型以及一些预训练的模型在训练完毕之后会在其参数存储了大量的压缩资讯。但是这样的参数是通过固定的语料库训练而成&#xff0c;训练完毕之后这个模型已经固定了。然而外部资讯瞬息万变&#xff0c;加上大模型本质上为一种概率模型&#xff0c;所…

Nginx读书笔记

Nginx 是高性能的 HTTP 和反向代理的web服务器

ffmpeg使用xfade的转场特效

ffmpeg使用xfade的转场特效 1. 介绍2. ffmpeg里面的xfade3. 使用 1. 介绍 参考文档 ffmpeg是一个音视频编辑工具&#xff0c;具体的。。。。我才搞接触&#xff0c;所以不懂。 xfade是一种视频转场滤镜&#xff0c;用于在两个视频片段之间创建平滑的过渡效果。xfade的转场效果…

软件测试有哪些常用的测试方法?

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 软件测试是软件开发过程中重要组成部分&#xff0c;是用来确认一个程序的质量或者性能是否符合开…

visual studio snippet常用注释片段

Visual Studio 2022 添加自定义代码片段_vs2022 代码片段-CSDN博客 dclass.snippet: <?xml version"1.0" encoding"utf-8"?> <CodeSnippets xmlns"http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet"> …

前端JS必用工具【js-tool-big-box】学习,检测当前是否为手机端浏览器,检测某元素是否处于当前可视范围内

这一小节&#xff0c;js-tool-big-box工具库又迎来了两个非常实用功能成员&#xff0c;分别是检测当前浏览器是否为手机端浏览器&#xff0c;还有检测某元素当前是否处于可视范围内。 1 安装引入 通过npm安装&#xff0c;执行以下命令 npm i js-tool-big-box 这两个功能&…

跨域数据流动:数据提取过程中的治理与安全双轮驱动

跨域数据流动&#xff1a;数据提取过程中的治理与安全双轮驱动 随着信息技术的飞速发展&#xff0c;跨域数据流动已成为现代社会的常态。从医疗记录到金融交易&#xff0c;从社交媒体到企业运营&#xff0c;数据在各个领域之间频繁交换&#xff0c;为社会发展带来了极大的便利…

汽车电子笔记之-012:旋变工作原理及软解码硬解码

目录 1、旋变 1.1、激励的产生 1.2、旋变的标定 2、旋变解码 2.1、旋变硬解码 2.2、软解码 1、旋变 旋转变压器&#xff08;旋变&#xff09;&#xff0c;是电机控制中常用的一种位置传感器&#xff0c;用来反应电机的转子位置&#xff0c;提供给软件做电机控制等相关算法…

java基础之对线程的理解

目录 程序、进程、线程 什么是进程&#xff1f; 什么是线程 线程与进程的区别&#xff1f; 二、多线程 实现多线程方式一&#xff1a;继承Thread类 实现多线程方式二&#xff1a;实现Runnable接口 实现多线程方式三: 实现Callable接口 ​ 三种实现方式的对比 设置和获…

【WEEK12】 【DAY3】整合MyBatis框架【中文版】

2024.5.15 Wednesday 目录 13.整合MyBatis框架13.1.整合测试13.1.1.新建springboot-05-mybatis项目13.1.2.导入MyBatis需要的依赖13.1.3.配置数据库连接信息13.1.3.1.修改application.properties13.1.3.2.修改Springboot05MybatisApplicationTests.java并测试 13.1.4.新建pojo文…

InnoDB 事务处理机制

文章目录 前言1. 事务处理挑战1.1 事务机制处理的问题1.2 并发事务带来的问题 2. InnodDB 和 ACID 模型2.1 Innodb Buffer Pool2.2 Redo log2.3 Undo log2.4 应用案例 3. 隔离级别和锁机制3.1 事务隔离级别3.1.1 READ UNCOMMITTED3.1.2 READ COMMITTED3.1.3 REPEATABLE READ3.1…

SpringBoot应用

文章目录 第一章、SpringBoot基础内容一、Spring和SpringBoot1、Spring介绍2、SpringBoot介绍 二、SpringBoot2入门操作1、在线构建2、idea构建 三、浅谈自动装配的原理 第二章、SpringBoot核心功能一、配置文件1、配置文件介绍2、语法规则3、数据类型4、案例使用 二、WEB开发1…

如何管理测试用例?测试用例有什么管理工具?YesDev

3.1 测试用例 测试用例(Test Case) 是指对一项特定的软件产品进行测试任务的描述&#xff0c;体现测试方案、方法、技术和策略。其内容包括测试目标、测试环境、输入数据、测试步骤、预期结果等。简单地认为&#xff0c;测试用例是为某个特殊目标而编制的一组测试输入、执行条…

CPT7数据保存详细步骤

一、连接设备、打开NovAtelConnect 软件 (1)点击1,并在2中输入如下命令: LOG RANGEB ONTIME 1 // 输出原始数据记录在板卡LOG RAWEPHEMB ONTIME 1 // 输出 GPS 原始星历记录在板卡LOG bdsephemerisb ONTIME 1 // 输出

在澳门写代码;技术入股2次融资被踢;现在只想做独立开发

本期我们邀请的程序员是Albert&#xff0c;先后在广州、澳门、珠海、香港工作过&#xff0c;打工上班、合伙创业、远程工作、独立开发&#xff0c;工作经历丰富&#xff0c;如果你想知道哪些程序员踩过的坑&#xff0c;请别错过他的故事。 广州&#xff1a;第一份工作2000块一…

C++ 结构体内存对齐

定义了两个结构体 typedef struct Cmd {uint8_t ua;uint8_t ub;uint8_t uc;uint32_t ue; } Cmd_t;typedef struct Cmd_tag {uint8_t value;uint8_t data[1]; // 将 data 定义为指向 Cmd_t 结构体的指针 } tag_t;在实际使用中&#xff0c;看见前人的代码是&#xff0c;new 一块内…

MySQL第三次作业--DML语句(INSERT)

目录 一、在数据库中创建一个表student&#xff0c;用于存储学生信息 二、向student表中添加一条新记录&#xff0c;记录中id字段的值为1&#xff0c;name字段的值为"monkey"&#xff0c;grade字段的值为98.5 三、向student表中添加多条新记录&#xff1a; 2,&qu…