【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!

文章目录

🍀什么是生命周期?

生命周期指的是事物从诞生到消亡所经历的各个阶段或过程。在软件开发中,特别是在前端开发中,生命周期通常指的是一个软件组件(比如网页、应用程序)从创建到销毁的整个过程。在这个过程中,组件会经历不同的阶段,每个阶段都有自己的特点和功能

如果问它有啥用的话,那么就是它可以帮助开发者更好地理解和控制软件的行为,例如在特定阶段执行特定的操作,或者释放资源以防止内存泄漏,本节我们将简单介绍一下Vue2,3当中的生命周期,以及它们的相同不同之处


🍀Vue2的生命周期

前几节我们都是使用Vue3进行实操,但是我们还没有创建过Vue2的项目,这里我们创建一个Vue2的项目

我们再来回顾一下

html 复制代码
vue create vue2_test

接下来我们选择vue2

接下来我们就暂且等待创建成功吧

创建完成后,我们将根组件也就是App.vue中的内容进行清理一下,同时创建一个Person.vue作为子组件,同时在子组件里面写上我们的初识代码

html 复制代码
<template>
 
</template>

<script>

export default {
  name: 'Person',
}
</script>

相比于Vue3,Vue2的运行命令如下

html 复制代码
npm run serve

别忘了根组件的书写

html 复制代码
<template>
 <Person/>
</template>

<script>
import Person from './components/Person.vue'
export default {
  name: 'App',
  components:{Person}
}
</script>

接下来我们上正题

在 Vue 2 中,组件的生命周期包括了创建、挂载、更新和销毁四个阶段。下面是 Vue 2 的生命周期钩子函数列表:

  • beforeCreate: 在实例初始化之后,数据观测 (data observer) 和事件配置 (event watchers) 之前被调用。
  • created: 实例已经创建完成后被调用,此时组件的数据绑定、计算属性、方法、事件等都已初始化。
html 复制代码
beforeCreate(){
	console.log('创建前')
},
created(){
	console.log('创建完毕')
}
  • beforeMount: 在挂载开始之前被调用,相关的渲染函数首次被调用。
  • mounted: 实例挂载完成后被调用,此时 DOM 元素已经插入文档中。
html 复制代码
beforeMount(){
	console.log('挂载前')
},
mounted(){
	console.log('挂载完毕')
}
  • beforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • updated: 组件更新完成后被调用,此时 DOM 已经更新。
html 复制代码
beforeUpdate(){
	console.log('更新前')
},
updated(){
	console.log('更新完毕')
}
  • beforeDestroy: 实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed: 实例销毁后调用,此时 Vue 实例的所有指令、事件监听器被移除,所有子实例也被销毁。
html 复制代码
beforeDestroy(){
	console.log('销毁前')
},
destroyed(){
	console.log('销毁完毕')
}

🍀Vue3的生命周期

在 Vue 3 中,与 Vue 2 类似,依然保留了创建、挂载、更新和销毁四个阶段,但在细节上有所调整和优化。Vue 3 为了提高性能,对一些生命周期钩子进行了拆分和合并。

下面是 Vue 3 的生命周期钩子函数列表:

  • setup:创建
  • onBeforeMount: 在挂载开始之前被调用,相关的渲染函数首次被调用。
  • onMounted: 实例挂载完成后被调用,此时 DOM 元素已经插入文档中。
  • onBeforeUpdate: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  • onUpdated: 组件更新完成后被调用,此时 DOM 已经更新。
  • onBeforeUnmount: 在卸载组件之前调用。
  • onUnmounted: 组件卸载后调用。
html 复制代码
	// 创建
    console.log('创建')
  
    // 挂载前
    onBeforeMount(()=>{
      // console.log('挂载前')
    })
    // 挂载完毕
    onMounted(()=>{
      //console.log('挂载完毕')
    })
    // 更新前
    onBeforeUpdate(()=>{
      // console.log('更新前')
    })
    // 更新完毕
    onUpdated(()=>{
      // console.log('更新完毕')
    })
    // 卸载前
    onBeforeUnmount(()=>{
      // console.log('卸载前')
    })
    // 卸载完毕
    onUnmounted(()=>{
      // console.log('卸载完毕')
    })

注意:父组件的最后挂载的


🍀 Vue 2 与 Vue 3 生命周期的变化

在 Vue 3 中,生命周期钩子函数的名称发生了变化,从 before 和 mounted 变为 onBefore 和 onMounted。这样的调整使得生命周期钩子的命名更加一致和清晰。此外,Vue 3 还将销毁阶段的钩子函数从 beforeDestroy 和 destroyed 合并为 onBeforeUnmount 和 onUnmounted,简化了生命周期的管理和理解。

另外,Vue 3 通过引入 Composition API,进一步提升了组件的灵活性和复用性。通过 Composition API,开发者可以更加自由地组织组件逻辑,不再受限于固定的生命周期钩子函数,这对于复杂组件的开发尤为重要。

🍀 结论

本文对 Vue 2 和 Vue 3 的生命周期进行了对比与分析,介绍了两者的异同点。Vue 3 在保留 Vue 2 生命周期特性的基础上,做出了一些调整和优化,以提升开发体验和性能。了解和熟悉 Vue 的生命周期对于正确使用和优化 Vue 应用程序至关重要,希望本文能够帮助读者更好地理解和应用 Vue.js。

挑战与创造都是很痛苦的,但是很充实。

相关推荐
喝拿铁写前端几秒前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED7 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪28 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程38 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑