首页 > 其他分享 >vue2和vue3的生命周期对比?

vue2和vue3的生命周期对比?

时间:2024-07-15 21:29:55浏览次数:13  
标签:API 生命周期 函数 钩子 Vue vue2 vue3 组件

Vue 2和Vue 3在生命周期钩子函数方面存在明显的区别,这些区别主要体现在命名、新增钩子函数、触发时机以及API的使用方式等方面。以下是对两者生命周期的详细对比:

一、命名变化

  • Vue 2:生命周期钩子函数的名称通常以"before"、"created"、"mounted"等前缀命名,如beforeCreatecreatedbeforeMountmounted等。
  • Vue 3:在Vue 3中,生命周期钩子函数的名称被修改为以"on"为前缀,如onBeforeCreateonCreatedonBeforeMountonMounted等。这一变化使得Vue 3的生命周期钩子函数命名更加统一和易于理解。

需要注意的是,Vue 3中的beforeCreatecreated这两个钩子被setup()函数所替代。setup()函数在组件创建之前执行,用于设置组件的响应式数据、计算属性、方法等。

二、新增钩子函数

  • Vue 3引入了一些新的生命周期钩子函数,这些函数在Vue 2中是没有的。例如,onBeforeUpdateonUpdated钩子函数用于在组件更新之前和之后执行一些操作。这些新增的钩子函数为开发者提供了更多的控制权和灵活性。

三、触发时机和顺序

  • Vue 2:生命周期钩子函数按照组件的创建、挂载、更新和销毁等阶段依次触发。这些钩子函数的执行顺序是固定的,且是同步执行的。
  • Vue 3:在Vue 3中,由于引入了组合式API(Composition API)和异步更新的机制,生命周期钩子的触发时机和顺序可能发生变化。例如,setup()函数在beforeCreatecreated之前执行,且组件的创建和更新可能是异步进行的。此外,Vue 3还采用了一种新的生命周期钩子合并方式,即将相同阶段的钩子函数合并为一个函数,以提高性能和优化组件运行的顺序。

四、API使用方式

  • Vue 2:在Vue 2中,生命周期钩子函数通常是在组件的选项对象中定义的,如beforeCreatecreated等。这些钩子函数可以直接访问组件实例上的属性和方法。
  • Vue 3:在Vue 3中,随着组合式API的引入,生命周期钩子函数可以通过导入vue库中的相关函数来使用,如onMountedonBeforeUnmount等。这些钩子函数通常在setup()函数内部被调用,并且需要通过返回值或refreactive等响应式API来访问和修改组件的状态。

五、总结

Vue 3在生命周期钩子函数方面进行了较大的改进和优化,包括命名变化、新增钩子函数、触发时机和顺序的调整以及API使用方式的改变。这些变化使得Vue 3在性能和开发体验上都有所提升,同时也为开发者提供了更多的灵活性和控制权。

标签:API,生命周期,函数,钩子,Vue,vue2,vue3,组件
From: https://blog.csdn.net/m0_54007573/article/details/140449500

相关文章

  • vue3快速上手指南
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快......
  • Vue3中,使用TSX/JSX编写的父组件,如何向子组件中传递具名插槽(slot)的内容
    子组件(Child)-模板代码:<template><divclass="child-component"><divclass="header-box"><slotname="header"></slot></div><slot></slot></div></tem......
  • vue3+vite学习日记之路由
    一、新项目开启网上的项目视频大多数要什么加好友、评论啥的,我嫌麻烦,还是自己边看边写自己的项目吧。ps:可能会和参考视频有一些差异。二、项目创建先创建项目并进行一些安装配置:1、npmcreatevite@latest->输入项目名称->选择vue->选择ts->根据提示进行 2、安装vue-rou......
  • vue3中的props和emit
    首先我们要明确props和emit是在父子组件(嵌套组件)中使用的。想要在父组件中渲染出子组件里的内容,需要在父组件中导入子组件,并在模板中渲染子组件。那父子组件中如何通信呢?就需要使用到props和emit。props当子组件要接受父组件传递的数据信息时,也可以说是父组件传递数据给子......
  • 【vue深入学习第1章】探索 Vue 2 的生命周期:从创建到销毁
    Vue.js是一个渐进式的JavaScript框架,用于构建用户界面。理解Vue的生命周期是掌握这个框架的关键之一。在这篇博客中,我们将深入探讨Vue2的生命周期,并通过代码示例来展示每个生命周期钩子的作用。Vue实例的生命周期Vue实例的生命周期可以分为四个主要阶段:创建阶段:初始......
  • Vue3+Element Plus 使用sortablejs对el-table表格进行拖拽
    sortablejs官网:点击跳转一、安装sortablejsnpminstallsortablejs--save二、 页面按需引入importSortablefrom'sortablejs';三、组件方法1.temlate:<template><el-tableref="tableHeader":data="tableData"row-key="id"style=&quo......
  • vue3+Element Plus 自定义表格单选 多选
    项目背景:用vue3+elementplus做一套考试系统功能场景:添加试题中分为客观题、主观题两种类型,在客观题会出现单选题、多选题两种类型就会导致单选题只能勾选一个答案、多选题能勾选多个答案。效果图废话不说直接上代码<el-buttonclass="btn"icon="Plus"plainst......
  • Vue2中的进度条案例
     v-bind对于样式控制的增强--操作style语法::style=“样式对象”适用于某个具体属性的动态设置<divclass="box":style="{css属性名1:css属性值,css属性名2:css属性值}"></div><!DOCTYPEhtml><htmllang="en"><head><metacharset=......
  • ElementUI 本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功
    ElementUI本身没有提供年份范围选择组件,但可以通过封装两个年份选择器来实现类似的功能。以下是一个使用Vue2和ElementUI实现年份范围选择器的示例代码: <script>exportdefault{name:'YearRangePicker',//接收父组件传入的年份范围数据props:{value:{......
  • 静态html vue3 element-plus 示例页面
    代码:<!doctypehtml><html><head><metacharset="utf-8"><title>example</title><!--复制于文件:https://unpkg.com/[email protected]/dist/vue.global.js--><scriptsrc="/......