vue生命周期?以及vue2和vue3生命周期的区别?

简介: vue生命周期?以及vue2和vue3生命周期的区别?

前言

Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。

Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。

vue2.0生命周期:

创建阶段

beforeCreate()创建前阶段,这个时候还不能使用data中的数据。

created()创建完成 最早可以使用data中的数据

挂载阶段

beforeMount:在挂载开始之前被调用: 相关的 render 函数首次被调用

mounted: 挂载完成,DOM节点挂载到实例上去之后调用该钩子

更新阶段

beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。

updated: 数据更新完成并且DOM更新完成后调用销

销毁阶段

beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用

destroved:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定

vue3.0

1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段,同样的新增了一个 setup

2、beforeMount 挂载之前 改名 onBeforeMount

3、mounted 挂载之后 改名 onMounted

4、beforeUpdate 数据更新之前 改名 onBeforeUpdate

5、updated 数据更新之后 改名 onUpdated

6、beforeDestroy 销毁前 改名 onBeforeUnmount,可在此进行清除定时器,进行事件监听,发布订阅。

7、destoryed 销毁后 改名 onUnmounted

8、errorCaptured 报错 改名 onErrorCaptured

总结

不难发现3.0中钩子函数最大的变化就是setup代替了2.0中的beforeCreate和created,而对应其它几个函数来说都是名称上发生了一些变化,其功能基本上还是一样的。


相关文章
|
19天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
170 11
|
3天前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
27 0
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
296 1
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1198 0
|
22天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
158 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
602 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
5月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
568 77
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
127 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
269 1