vue2,3生命周期

news/2024/9/18 15:54:22/ 标签: vue.js, javascript, 前端

Vue.js 的生命周期在 Vue 2 和 Vue 3 中有所不同,但基本的概念是相似的。Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程,这个过程中 Vue 实例会触发一系列的事件,我们称之为生命周期钩子(Lifecycle Hooks)。开发者可以利用这些钩子来执行自己的代码,如数据初始化、DOM 操作、事件监听/移除等。

Vue 2 生命周期

Vue 2 提供了以下生命周期钩子:

  1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  2. created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
  4. mounted:el 被新创建的 vm.el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el 也在文档内。
  5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
  6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用这个钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态,因为这可能会导致无限循环的更新。
  7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
  8. destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

Vue 3 中的 setup

setup 函数是 Vue 3 中 Composition API 的入口点。它在组件的 beforeCreate 和 created 钩子函数之前被调用,是组件中使用 Composition API 的第一个函数。在 setup 函数中,你可以定义响应式数据、计算属性、生命周期钩子等。

setup 函数的两个重要特点:

  1. 调用时机:在组件的 beforeCreate 和 created 生命周期钩子之前调用,因此在这个函数中不能访问组件的 this 上下文(因为此时组件实例尚未创建)。
  2. 返回值setup 函数的返回值是一个对象,这个对象中的所有属性和方法都将被合并到组件的上下文中,并可以在模板中直接使用。

Vue 3 生命周期(包含 setup

结合 setup 函数,Vue 3 的生命周期可以看作是在组件的不同阶段自动调用的函数集合,这些函数允许执行自定义的逻辑。以下是Vue 3生命周期的完整列表(包含Options API和Composition API中的钩子):

  • Options API 生命周期钩子(与Vue 2相似,但名称可能有所变化):
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeUnmount(Vue 2中为beforeDestroy)
    • unmounted(Vue 2中为destroyed)
    • activated(与<keep-alive>相关)
    • deactivated(与<keep-alive>相关)
  • Composition API 生命周期钩子(新增或替代):
    • setup(在beforeCreatecreated之前调用,用于定义响应式数据和函数)
    • onBeforeMount(替代Vue 2的beforeMount
    • onMounted(替代Vue 2的mounted
    • onBeforeUpdate(替代Vue 2的beforeUpdate
    • onUpdated(替代Vue 2的updated
    • onBeforeUnmount(替代Vue 2的beforeDestroy
    • onUnmounted(替代Vue 2的destroyed
    • onErrorCaptured(新的生命周期钩子,用于捕获来自子孙组件的异常)

需要注意的是,虽然Options API和Composition API提供了不同的方式来定义和使用生命周期钩子,但它们都可以在同一个组件中使用。然而,在实际开发中,通常会选择其中一种API风格来保持代码的一致性和可维护性。


http://www.ppmy.cn/news/1525780.html

相关文章

在Milvus中创建集合并在集合中插入数据,然后attu管理工具可以查看

日志打印出来的是这个&#xff0c;现在attu为什么看不到插入的数据信息&#xff0c;集合信息已经可以看到&#xff0c;为什么看不到数据呢/home/anaconda3/envs/bi-txt-sql/bin/python -X pycache_prefix/home/.cache/JetBrains/PyCharm2023.2/cpython-cache /home/tools/pycha…

前端——标签二(超链接)

标签二 超链接标签&#xff1a;a 超链接&#xff0c;实现页面间的跳转和数据传输 a标签的属性 href&#xff1a;跳转路径&#xff08;url&#xff09;必须具备&#xff0c;表示点击后会跳转到哪个页面 target&#xff1a;页面打开方式。默认是 _self 如果是 _blank则用新的…

CSDN玩法攻略(维护中)

以下均为测试过的条件 隐形条件和官方描写可能不准确更新不及时 勋章 签到勋章(已下架) 勤写标兵 每周三篇原创等级1 max10 创作能手 lv1 每周1-3 lv2 每周4-6 lv3 每周7-8 lv4 每周>9 持续创作 授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户 五一创作勋章 每…

matlab处理函数2

1、数字数字图像的变换 ① fft2&#xff1a;fft2函数用于数字数字图像的二维傅立叶变换 iimread(104_8.tif); jfft2(i); ②ifft2:&#xff1a;ifft2函数用于数字数字图像的二维傅立叶反变换 iimread(104_8.tif);jfft2(i); kifft2(j); 2、模拟噪声生成函数和预定义滤波器 ①…

桥接模式详解和分析JDBC中的应用

&#x1f3af; 设计模式专栏&#xff0c;持续更新中&#xff0c; 欢迎订阅&#xff1a;JAVA实现设计模式 &#x1f6e0;️ 希望小伙伴们一键三连&#xff0c;有问题私信都会回复&#xff0c;或者在评论区直接发言 桥接模式 文章目录 桥接模式桥接模式的四个核心组成&#xff1a…

SMA2:代码实现详解——Image Encoder篇(Hiera章)

SMA2:代码实现详解——Image Encoder篇&#xff08;Hiera&#xff09; 写在前面 大家在SMA2:代码实现详解——Image Encoder篇&#xff08;FpnNeck&#xff09;下的留言我已收到&#xff0c;感谢大家的支持&#xff0c;后面如果遇到比较难以讲清的部分可能会使用视频的形式。…

Unity3D类似于桌面精灵的功能实现

前言&#xff1a; 由于最近在做游戏魔改&#xff0c;很多功能在游戏里面没法实现&#xff08;没错&#xff0c;说的就是排行榜&#xff09;&#xff0c;所以准备用Unity3D开发一个类似于桌面精灵的功能部件&#xff0c;实现效果如下&#xff1a; PS&#xff1a;有需要定制的老…

什么是 Grafana?

什么是 Grafana&#xff1f; Grafana 是一个功能强大的开源平台&#xff0c;用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘&#xff08;Dashboard&#xff09;&#xff0c;它能够帮助用户监控实时数据、生成历史报告&#xff0c;甚至进行预测分析。Grafana…

JVM四种垃圾回收算法以及G1垃圾回收器(面试)

JVM 垃圾回收算法 标记清除算法&#xff1a;标记清除算法将垃圾回收分为两个阶段&#xff1a;标记阶段和清除阶段。 在标记阶段通过根节点&#xff0c;标记所有从根节点开始的对象。然后&#xff0c;在清除阶段&#xff0c;清除所有未被标记的对象 适用场合&#xff1a; 存活对…

Linux面试题3

1. 描述Linux操作系统的安装过程。 以下是关于Linux操作系统的安装过程的描述&#xff1a; 选择发行版&#xff1a;首先&#xff0c;您需要选择一个Linux发行版&#xff0c;如Ubuntu、Fedora、Debian等。不同的发行版有不同的特点和适用场景&#xff0c;您可以根据自己的需求…

【物联网技术大作业】设计一个智能家居的应用场景

前言&#xff1a; 本人的物联网技术的期末大作业&#xff0c;希望对你有帮助。 目录 大作业设计题 &#xff08;1&#xff09;智能家居的概述。 &#xff08;2&#xff09;介绍智能家居应用。要求至少5个方面的应用&#xff0c;包括每个应用所采用的设备&#xff0c;性能&am…

Excel--不规则隔行填充底纹颜色

巧用条件格式快速给小计和总计行填充不同颜色。 先选择整个表格&#xff08;选中第一行&#xff0c;按住Shift双击边框即可选中整个表格&#xff09; 新建条件格式-使用公式确定要设置格式的单元格&#xff0c;输入$B3"小计&#xff1a;"&#xff0c;设置格式&…

【Python 数据分析学习】Pandas的基础和应用(2)

题目 1 数据运算与分析1.1 算数和比较运算1.1.1 算数运算1.1.2 比较运算 1.2 数据排列1.3 统计分析1.3.1 基本的统计分析函数1.3.2 特殊的统计分析函数1.3.3 检查和处理空值 1.4 分组与聚合1.4.1 数据分组1.4.2 数据聚合 1.5 透视交叉表1.5.1 透视表1.5.2 交叉表 2 实战演练2.1…

一个用于翻译 CSV 文件的 Python 脚本,适用于将英文内容批量翻译成中文(或其他语言),并解决文件编码导致的中文乱码和无法翻译的问题。

将CSV文件中的英文批量翻译成中文的 Python 脚本 一个用于翻译 CSV 文件的 Python 脚本&#xff0c;适用于将英文内容批量翻译成中文&#xff08;或其他语言&#xff09;&#xff0c;并解决文件编码导致的中文乱码和无法翻译的问题。 主要功能&#xff1a; 文件编码转换&…

Redis——初识Redis

初识Redis Redis认识Redis 分布式系统单机架构为什么要引入分布式理解负载均衡数据库的读写分离引入主从数据库 引入缓存数据库分库分表业务拆分——微服务常见概念了解 Redis背景介绍特性应用场景Redis不能做的事情Redis客户端redis客户端的多种形态 Redis 认识Redis 存储数…

定时中断键盘灯闪烁

在学习完《趣味定时器》后,是不是只在 dmesg 里看到效果很没劲,这次来点更实际的,我们让键盘灯闪起来。 对于定时器,就不多说了,接下来了解下键盘的基本内容。键盘在 Linux 里是属于TTY(TeleTYpe)设备,既然我们要用到键盘,那先找其通用驱动代码,在 Linux Kernel 源码d…

golang学习笔记14——golang性能问题的处理方法

推荐学习文档 基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学习笔记04——如何真正写好Golang代码&…

玩转扩展库,温湿度传感器篇!—合宙Air201资产定位模组LuatOS快速入门05

随着LuatOS快速入门系列教程的推出&#xff0c;小伙伴们学习热情高涨。 合宙Air201不仅支持三种定位方式&#xff0c;还具有丰富的扩展功能&#xff0c;通过外扩BTB链接方案&#xff0c;最多可支持21个IO接口&#xff1a;SPI、I2C、UART等多种接口全部支持。 本期&#xff0c…

基于python+django+mysql+Nanodet检测模型的水稻虫害检测系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

【机器学习(六)】分类和回归任务-LightGBM算法-Sentosa_DSML社区版

文章目录 一、算法概念二、算法原理&#xff08;一&#xff09;Histogram&#xff08;二&#xff09;GOSS1、信息增益2、近似误差 &#xff08;三&#xff09;EFB 三、算法优缺点&#xff08;一&#xff09;优点&#xff08;二&#xff09;缺点 四、LightGBM分类任务实现对比&a…