vue2,3生命周期

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 的入口点。它在组件的 beforeCreatecreated 钩子函数之前被调用,是组件中使用 Composition API 的第一个函数。在 setup 函数中,你可以定义响应式数据、计算属性、生命周期钩子等。

setup 函数的两个重要特点:

  1. 调用时机 :在组件的 beforeCreatecreated 生命周期钩子之前调用,因此在这个函数中不能访问组件的 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风格来保持代码的一致性和可维护性。

相关推荐
excel11 分钟前
webpack 核心编译器 十四 节
前端
excel18 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪11 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github