vue3 生命周期函数，都改了啥？
vue2到3常用生命周期钩子函数的变化
Ⅰ. 实例化 和 数据初始化 （beforeCreate，created => setup）
1. new Vue 从开始 => 结束 [vue2和3 、两版本区别处]
vue2的写法=>
export default {beforeCreate(){console.log('vue的实例 还没new出来！');},created(){console.log('new Vue() => 成功 watch,computed,方法,监听事件 配置完毕');}
}
应用场景及注意：
① 在created 后，还无法获取dom ，rander函数还未执行！
② 一般用于判断用户是否有这个，页面权限，在没有该权限前进行阻止，或跳转其他页面。
vue3的写法=>
beforeCreate => 使用 setup()
created => 使用 setup()
export default {setup(){console.log('setup 中 相当于在beforeCreate和created 之间');}
}
Ⅱ. 实现视图渲染 （beforeMounted 、mounted）
1. rander函数首次调用 => 结束
vue2的写法=>
export default {beforeMount(){console.log('开始 rander 函数，渲染dom ');},mounted(){console.log('dom渲染完成 ，可以获取dom ');}
}
应用场景及注意
1. dom元素从未创建 => 创建结束，mounted之后可以拿去dom .
2. 可以调用接口 ，初始话页面的数据 .
vue3的写法=>
beforeMount => onBeforeMount
mounted => onMounted
export default {
import { onMounted,onBeforeMount} from 'vue'setup() {onBeforeMount(() => {console.log('开始 rander 函数，渲染dom ');})onMounted(() => {console.log('dom渲染完成 ，可以获取dom ');})}
}
Ⅲ. 页面数据发生更新（beforeUpdate，update）
1. 响应数据发生变化是触发
vue2的写法=>
export default {beforeUpdate(){console.log('data中的变量, 要改变了 ');},update(){console.log('data中的变量，发生改变');}
}
应用场景及注意：
1. update的使用场景并不多，而且无法准确知道是那个变量触发了更新
vue3的写法=>
beforeUpdate => onBeforeUpdate
update => onUpdate
export default {
import { onMounted,onBeforeMount} from 'vue'setup() {onBeforeUpdate(() => {console.log('ref 或 reactive 创建的变量, 要改变了 ');})onUpdate(() => {console.log('ref 或 reactive 创建的变量, 发生改变');})}
}
Ⅳ. 组件卸载时（beforeDestroy，destroyed => beforeUnmount，unmounted）
1. 关闭或离开该组件触发 [vue2和3 、两版本区别处]
vue2的写法=>
export default {beforeDestroy(){console.log('将要离开该组件');},destroyed (){console.log('已经离开组件');}
}
应用场景及注意：
1. 处理离开组件的一些逻辑，比如清楚定时器，调用退出用户的接口 == 。
vue3的写法=>
beforeDestroy => beforeUnmount
destroyed => unmounted
export default {
import { onMounted,onBeforeMount} from 'vue'setup() {beforeUnmount(() => {console.log('将要离开该组件');})unmounted(() => {console.log('已经离开组件');})}
}
总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁
相关文章：
【webrtc】MessageHandler 5： 基于线程的消息处理：以PeerConnection信令线程为例
peerconn的信令是通过post 消息到自己的信令线程消息来处理的PeerConnectionMessageHandler 是具体的处理器G:\CDN\rtcCli\m98\src\pc\peer_connection_message_handler.hMachinery for handling messages posted to oneself PeerConnectionMessageHandler 明确服务于 signalin…...
类的特殊成员函数编写示例
使用 (copy|move) & swap 方式 没有处理自赋值 无父类示例 class Widget { public:Widget() {this->x = new int;std::cout << (this) << " ";std::cout << "Constructor called" << std::endl;}Widget(const Widget& …...
大数据面试题 —— Spark数据倾斜及其解决方案
目录 1 调优概述2 数据倾斜发生时的现象3 数据倾斜发生的原理4 如何定位导致数据倾斜的代码4.1 某个 task 执行特别慢的情况4.2 某个 task 莫名其妙内存溢出的情况5 查看导致数据倾斜的 key 的数据分布情况6 数据倾斜的解决方案6.1 使用 Hive ETL 预处理数据6.2 过滤少数导致倾…...
Flutter笔记：Widgets Easier组件库（5）使用加减器
Flutter笔记 Widgets Easier组件库（5）：使用加减器 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite：http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…...
.Net 8.0 下的新RPC，IceRPC之使用Dev Containers进行 .NET QUIC 精简开发
作者引言很高兴啊，我们来到了IceRPC之使用Dev Containers进行 .NET QUIC 精简开发，主要是一篇指引，如何使用开发容器做为开发环境，进行开发IceRPC,可适用于任务应用的开发使用 Dev Containers 进行 .NET QUIC 精简开发主要是引导大家，如何使用开发容器Development Contain…...
【IO操作】标准IO和文件IO
一.标准IO和文件IO的区别 （1）一般标准IO指的是C语言的IO操作，文件IO一般指的是Linux系统调用的IO操作。标准O因为是C语言提供的标准库，所以可以在其他操作系统平台编译后可以执行，但是文件IO只能在Linux下使用&#x…...
vue3 生命周期函数，都改了啥？
vue2到3常用生命周期钩子函数的变化 Ⅰ. 实例化 和 数据初始化 （beforeCreate，created > setup） 1. new Vue 从开始 > 结束 [vue2和3 、两版本区别处] vue2的写法> export default {beforeCreate(){console.log(vue的实例 还没ne…...
基于springboot的医院管理系统
项目描述 临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里，你想解决的问题࿰…...
Django + Nginx https部署实战（第一辑）
WebServer和WebAPP 之前对于nginx的了解都只是听说，根本就不知道nginx对于整个网站的作用。经历了数个项目之后，我本人逐渐对nginx有了更深入的了解，也希望把这段经历拿出来分享给大家！ 由于我本人之前接触的都是Python的Django…...
Pycharm+服务器运行代码
Pycharm服务器运行代码服务器的连接与Anaconda环境配置ssh连接安装Anaconda创建虚拟环境安装代码所需的库Pycharm上传代码到服务器服务器的连接与Anaconda环境配置 ssh连接 我使用的是MobaXterm，新建一个会话，选择SSH，输入主机IP地址自己的…...
【Spring】IDEAspring-mybatis的整合----关于配置文件的整合
文章目录spring-mybatis的整合过程步骤1.导包，spring的jar包，mybatis的jar包2.mybatis.xml配置3.spring-mybatis.xml配置4.dao、service层、代码测试spring-mybatis的整合过程步骤 1.导包，spring的jar包，mybatis的jar包 <!--统…...
ssm技术
ssm ssm框架配置 maven项目–》webquickstart pom文件 <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLo…...
MQ消息队列
MQ消息队列 消息队列（Message Queue，简称MQ），指保存消息的一个容器，本质是个队列 消息队列是大型分布式系统不可缺少的中间件，也是高并发系统的基石中间件 使用消息队列还可以实现异步处理 下图便是消息…...
【JVM技术专题】精心准备了一套JVM分析工具的锦囊「JConsole补充篇」
前提概要 本篇文章主要针对于之前本系列文章的补充版，之前落下了Jconsole分析工具，所以为了了却这个遗憾，所以小编又开了这篇文章，主要针对于Jconsole工具进行相关的应用性能分析。 初识JConsole 【Jconsole（Java Moni…...
基于PHP的高效协同办公管理系统
有需要请私信或看评论链接哦 可远程调试 基于PHP高效协同办公管理系统一 介绍 高效协同办公管理系统基于Yii框架开发，数据库mysql，可以稳定用于商业以及门户级的开发和使用。 二 系统功能 用户 1 办公门户(邮件/日志/汇报/日程/信息中心/通知公告/微博…...
第十四届蓝桥杯（Web应用开发）模拟赛1期-大学组
数据类型检测 请看这篇数据类型检测 渐变色背景生成器 html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name&…...
【遥感科学】遥感科学绪论
第一章 绪论 本系列适用于梅安新老师的遥感导论复习，也可以作为遥感领域的快速入门文章 一、遥感的基本概念 啥子是遥感？借用童庆禧院士的理解，那就是欲穷千里目，更上一层楼，遥感可以看做人的眼睛或者感知的延伸&…...
Tensorflow图像识别 Tensorflow手写体识别（二）
资源介绍 我们从 MNIST handwritten digit database, Yann LeCun, Corinna Cortes and Chris Burges 这条链接（MNIST官网）中下载好数据集，如下： 下载下来以后整理成包含四个压缩包的文件MNIST_data（不要解压&#x…...
盘点上海IB国际学校，你会选哪一所呢？
之前，小编给大家盘点了上海热门的AP学校和Alevel学校，同时也介绍了国际课程的具体情况；今天就和大家聊聊上海的IB国际学校。IB即是国际文凭组织IBO(International Baccalaureate Organisation)为全球学生开设从幼儿园到大学预科的课程&#x…...
LT2611UX四端口 LVDS转 HDMI2.0，带音频
描述LT2611UX 是一款面向机顶盒、DVD 应用的高性能 LVDS 至 HDMI2.0 转换器。LVDS输入可配置为单端口、双端口或四端口，具有1个高速时钟通道和3~4个高速数据通道，工作速率最高为1.2Gbps/通道，可支持高达19.2Gbps的总带宽。LT2611UX 支持灵活的…...
【二等奖水平论文】2024五一数学建模C题22页保奖论文+22页matlab和13页python完整建模代码、可视图表+分解结果等（后续会更新）
一定要点击文末的卡片，那是资料获取的入口！ 点击链接加入群聊【2024五一数学建模】：http://qm.qq.com/cgi-bin/qm/qr?_wv1027&khoTDlhAS5N_Ffp-vucfG5WjeeJFxsWbz&authKey7oCSHS25VqSLauZ2PpiewRQ9D9PklaCxVS5X6i%2BAkDrey992f0t15…...
clang：在 Win10 上编译 MIDI 音乐程序
先从 Microsoft C Build Tools - Visual Studio 下载 1.73GB 安装 "Microsoft C Build Tools“ 访问 Swift.org - Download Swift 找到 Windows 10：x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ ，安装后大约占…...
15（第十四章，大数据和数据科学）
目录 概述 基本概念 数据仓库/传统商务智能与数据科学的比较 数据科学的过程 大数据 大数据来源 数据湖 机器学习 监督学习 无监督学习 强化学习 扩展 1、数据仓库（Data Warehouse） 2、数据湖(Data Lake) 3、大数据平台1.0 4、数据中台 …...
hive创建hbase外部关联表实例
在cdh6.3.2已经做好hbase和hive相关配置，这里不阐述。 要创建上述的表结构，你需要先在HBase中创建相应的表，然后在Hive中创建一个EXTERNAL TABLE来映射到这个HBase表。以下是详细的步骤： 步骤1：在HBase中创建表 确定…...
第12章 软件测试基础（第三部分）测试类型
七、测试类型（按工程阶段划分） 单集系确收 （一）单元测试 1、单元测试/模块测试 单元就是软件中最小单位（或模块）。可以是一个函数、一个过程、一个类。主要依据是模块的详细设计文档。价值在于尽早发现…...