vue2,3生命周期

embedded/2024/9/23 17:58:21/

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/embedded/112801.html

相关文章

简单了解Maven与安装

Maven 1.Maven 简介 Maven 是 Apache 软件基金会&#xff08;国外组织&#xff0c;专门维护开源项目&#xff09;的一个开源项目, 是一个优秀的项目构建工具, 它用来帮助开发者管理项目中的 jar, 以及 jar 之间的依赖关系(在A.jar文件中用到了B.jar)、 完成项目的编译&am…

OpenAI O1:人工智能推理能力的新里程碑

引言 北京时间9月13日凌晨&#xff0c;OpenAI在没有任何预告的情况下&#xff0c;正式发布了其首款具有推理能力的模型——OpenAI O1。这一模型的发布&#xff0c;不仅标志着人工智能能力的新水平&#xff0c;也预示着AI技术发展的新范式。本文将详细解析OpenAI O1模型的技术特…

【Java】线程状态:线程生命周期的六个阶段

欢迎浏览高耳机的博客 希望我们彼此都有更好的收获 感谢三连支持&#xff01; 在Java中&#xff0c;线程可以处于多种状态&#xff0c;这些状态描述了线程的生命周期。了解这些状态及其转换条件对于编写高效且无错误的多线程应用程序至关重要。本文将总结Java线程的几种状态&am…

单组件的编写

项目搭好了&#xff0c;第一个需要了解的是 Vue 组件的变化&#xff0c;由于这部分篇幅会非常大&#xff0c;所以会分成很多个小节&#xff0c;一部分一部分按照开发顺序来逐步了解。 因为 Vue 3 对 TypeScript 的支持真的是太完善了&#xff0c;并且 TypeScript 的发展趋势和…

从零开始搭建 PHP

&#x1f6e0;️ 从零开始搭建 PHP 环境&#xff1a;详细教程 PHP&#xff08;Hypertext Preprocessor&#xff09;是最流行的后端脚本语言之一&#xff0c;广泛用于构建动态网站和 Web 应用程序。在开始 PHP 开发之前&#xff0c;首先需要搭建 PHP 运行环境。无论你使用的是 …

Python---爬虫

文章目录 目录 前言 一.Http请求/响应模块 requests模块 二.文本筛选模块 re模块 XPath模块 XPath 路径表达式 XPath 语法元素 三. 爬虫模板 爬虫案例 前言 Python爬虫是一种通过自动化程序爬取互联网上的信息的技术。爬虫可以自动访问网页并提取所需的数据&#xff0c;比…

56. 合并区间

思路 对区间进行排序&#xff1a;按每个区间第一个数的大小进行升序排序 排好序后&#xff0c;初始化 dp[0]第一个区间 则下一个区间是否为一个单独区间&#xff0c;只需要看 这个区间的第一个数是否小于等于上一个区间的第二数&#xff0c;小于等于&#xff0c;则在上一个区间…

大数据之Spark(二)

9.4.3、RDD持久化 RDD之间进行相互迭代计算&#xff08;Transformation的转换&#xff09;&#xff0c;当执行开启&#xff0c;新RDD的生成代表旧RDD消失。如果有的rdd需要重复使用就需要将rdd缓存&#xff0c;rdd.cache()或rdd.persist()。清理缓存rdd.unpersist() 缓存特点&…