南昌p2p网站建设公司,福州seo关键词排名,嘉兴市秀洲区住房和建设局网站,佛山营销网站#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 什么是生命周期Vue2的生命周期Vue3的生命周期 Vue 2 与 Vue 3 生命周期的变化 结论 什么是生命周期 生命周期指的是事物从诞生到消亡所经历的各个阶段或过程。在软件开发中特别是在前端开发中生命周期通常指的是一个软件组件比如网页、应用程序从创建到销毁的整个过程。在这个过程中组件会经历不同的阶段每个阶段都有自己的特点和功能 如果问它有啥用的话那么就是它可以帮助开发者更好地理解和控制软件的行为例如在特定阶段执行特定的操作或者释放资源以防止内存泄漏本节我们将简单介绍一下Vue2,3当中的生命周期以及它们的相同不同之处 Vue2的生命周期
前几节我们都是使用Vue3进行实操但是我们还没有创建过Vue2的项目这里我们创建一个Vue2的项目 我们再来回顾一下
vue create vue2_test接下来我们选择vue2
接下来我们就暂且等待创建成功吧
创建完成后我们将根组件也就是App.vue中的内容进行清理一下同时创建一个Person.vue作为子组件同时在子组件里面写上我们的初识代码
template/templatescriptexport default {name: Person,
}
/script相比于Vue3Vue2的运行命令如下
npm run serve别忘了根组件的书写
templatePerson/
/templatescript
import Person from ./components/Person.vue
export default {name: App,components:{Person}
}
/script 接下来我们上正题 在 Vue 2 中组件的生命周期包括了创建、挂载、更新和销毁四个阶段。下面是 Vue 2 的生命周期钩子函数列表
beforeCreate: 在实例初始化之后数据观测 (data observer) 和事件配置 (event watchers) 之前被调用。created: 实例已经创建完成后被调用此时组件的数据绑定、计算属性、方法、事件等都已初始化。
beforeCreate(){console.log(创建前)
},
created(){console.log(创建完毕)
}beforeMount: 在挂载开始之前被调用相关的渲染函数首次被调用。mounted: 实例挂载完成后被调用此时 DOM 元素已经插入文档中。
beforeMount(){console.log(挂载前)
},
mounted(){console.log(挂载完毕)
}beforeUpdate: 数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。updated: 组件更新完成后被调用此时 DOM 已经更新。
beforeUpdate(){console.log(更新前)
},
updated(){console.log(更新完毕)
}beforeDestroy: 实例销毁之前调用。在这一步实例仍然完全可用。destroyed: 实例销毁后调用此时 Vue 实例的所有指令、事件监听器被移除所有子实例也被销毁。
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: 组件卸载后调用。 // 创建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。 挑战与创造都是很痛苦的但是很充实。
