Vue3 生命周期函数及其与Vue2的对比总结

Vue3 继续保留了 Vue2 的生命周期钩子,但在 Composition API(setup 函数)中,它们被改为了一组导入函数。以下是它们的对比:

Vue2 生命周期钩子和 Vue3 对应的生命周期函数:
在这里插入图片描述

在 Vue3 中,所有的生命周期函数都应在 setup 函数中使用。这里有一个 Vue3 生命周期函数的简单使用示例:

import { onMounted, onBeforeUnmount } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted')
    })
  }
}

在 Vue3 中,你也可以使用新的生命周期函数 onRenderTracked 和 onRenderTriggered,它们可以帮助你跟踪和调试组件的渲染。

与 Vue2 相比,Vue3 的生命周期函数提供了更好的类型支持和复用性。它们更加灵活,可以在组件之间共享和复用代码,这是在 Vue2 中无法做到的。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2的生命周期函数Vue3的生命周期函数在工作方式上非常相似,访问相同的钩子也可以用于相同的场景。在选项API中使用Vue2的生命周期钩子和Vue3的生命周期钩子的方式是一样的,所以如果项目使用选项API,就不需要更改任何代码,因为Vue3兼容以前的版本。然而,Vue3引入了组合API,它在较大的Vue项目中特别有用,组合API中访问这些钩子的方式略有不同。所以,在使用组合API时需要注意一些变化。具体来说,以下是Vue2和Vue3中的一些常用生命周期钩子的对比: 1. beforeCreate() - 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在Vue2和Vue3中的使用方式相同。 2. created() - 在实例创建完成后被立即调用。在Vue2和Vue3中的使用方式相同。 3. beforeMount() - 在挂载开始之前被调用。在Vue2中使用beforeMount(),而在Vue3中使用onBeforeMount()。 4. mounted() - 在挂载完成后被立即调用。在Vue2中使用mounted(),而在Vue3中使用onMounted()。 5. beforeUpdate() - 在组件更新之前被调用。在Vue2中使用beforeUpdate(),而在Vue3中使用onBeforeUpdate()。 6. updated() - 在组件更新之后被调用。在Vue2中使用updated(),而在Vue3中使用onUpdated()。 7. beforeUnmount() - 在卸载组件之前被调用。在Vue2中使用beforeDestroy(),而在Vue3中使用onBeforeUnmount()。 8. unmounted() - 在卸载组件之后被调用。在Vue2中使用destroyed(),而在Vue3中使用onUnmounted()。 所以,除了一些钩子函数的名称变化外,在使用方式和场景上,Vue2的生命周期函数Vue3的生命周期函数是非常相似的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue2与vue3生命周期函数详细对比](https://blog.csdn.net/XSL_HR/article/details/126997384)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值