深入了解vue2与vue3的生命周期对比

 更新时间:2021年12月17日 15:47:42   作者:新时代农民工Top  
这篇文章主要为大家介绍了vue2与vue3的生命周期对比,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

周期对比

vue2 vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
activeted onActiveted
deactiveted onDeactiveted
beforeDestory onBeforeUnmount
destoryed onUnmounted

用法

vue2 中的生命周期与 data / methods 同级别以函数方式使用,比如 created() {}

data() {
    return {}
},
created() {
    ...
}

vue3 中的生命周期 setup 在最外层,不需要按需加载,其他的生命周期得按需加载才能使用

import { omMounted } from 'vue'
setup() {
    onMounted(() => { ... })
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    这篇文章主要给大家深入的介绍了关于vue.js中v-if和v-show的相关资料,文中详细介绍两者的共同点和区别,通过图文介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • Vue父子组件之间事件通信示例解析

    Vue父子组件之间事件通信示例解析

    这篇文章主要介绍了React中父子组件通信详解,在父组件中,为子组件添加属性数据,即可实现父组件向子组件通信,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2023-03-03
  • vue2.x中monaco-editor的使用说明

    vue2.x中monaco-editor的使用说明

    这篇文章主要介绍了vue2.x中monaco-editor的使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

    Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码

    这篇文章主要介绍了Vue实现Tab标签路由效果,并用Animate.css做转场动画效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue图片压缩与批量上传方式

    vue图片压缩与批量上传方式

    文章介绍了使用Vue和Element UI的el-upload组件实现图片的批量上传和压缩功能,前端需引入image-conversion库并设置相关属性,关闭自动上传,通过on-change事件校验文件名和大小,并增加一个提交到服务器的按钮
    2025-01-01
  • vue-cli3.0 特性解读

    vue-cli3.0 特性解读

    这篇文章主要介绍了vue-cli3.0 特性解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue编译器解析compile源码解析

    Vue编译器解析compile源码解析

    这篇文章主要为大家介绍了Vue编译器解析compile源码解析示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue前端el-input输入限制输入位数及输入规则

    vue前端el-input输入限制输入位数及输入规则

    这篇文章主要给大家介绍了关于vue前端el-input输入限制输入位数及输入规则的相关资料,文中通过代码介绍的介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue中的nextTick作用和几个简单的使用场景

    Vue中的nextTick作用和几个简单的使用场景

    这篇文章主要介绍了Vue中的nextTick作用和几个简单的使用场景,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • 解决vue父组件调用子组件只执行一次问题

    解决vue父组件调用子组件只执行一次问题

    开发中,需求是将内容展示作为一个组件,输入为contentId,请求在组件中,只需根据父组件传过来的contentId去请求内容的详情即可,但是过程中却发现一个问题,父组件调用子组件只执行一次,所以本文就给大家介绍解决vue父组件调用子组件只执行一次问题
    2023-09-09

最新评论