Vue2 生命周期 详细讲解+图示

已于 2022-07-22 18:49:34 修改
阅读量925 收藏 2
点赞数 1
文章标签： 前端
于 2022-07-22 18:47:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45771053/article/details/125938195
版权

1.生命周期&生命周期函数

        生命周期(Life Cycle)是指一个组件从创建-》运行-》销毁的整个阶段，强调的是一个时间段。

        生命周期函数：是由Vue框架提供的内置函数，会伴随着组件生命周期，自动按次序执行。

2.组件生命周期函数的分类

        组件生命周期的第一阶段

               组件创建阶段：new Vue() -> beforeCreate -> created -> beforeMount -> Mounted 

        组件生命周期的第二阶段

                组件运行阶段：beforeUpdata -> Updated

         组件生命周期的第三阶段

                组件销毁阶段：beforeDestory -> destoryed

3.生命周期图示

        

前端JIREN
关注
vue2生命周期
lzy_3342118586的博客
03-24 1840
​ 生命周期 ​ 人：从出生到死亡的整个过程 ​ vue生命周期：vue实力从创建到销毁的整个过程；主要是在不同的时段执行不同的事情;常见的8个生命周期钩子函数（创建前后，挂载前后，更新前后，销毁前后）（beforeCreate 创建前、 created创建后、beforeMount 挂载前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后） 另外三个：activited de-- erorCapture..
Vue生命周期
laoli360的博客
09-28 208
人是有生命的,也是有周期这一个说法的婴儿 =>少年=>青年=>中年=>老年=>黄土 Vue也是有周期这一个说法的 它分为 创建=>挂载=>更新=>销毁 Vue - 钩子函数 Vue 框架内置函数，随着组件的生命周期阶段，自动执行 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 阶段 方法名 方法名 初始化 beforeCreate created 挂载 ..
Vue2生命周期总结
最新发布
weixin_74009702的博客
07-17 624
如果使用Vue框架，那么学习它的声明周期是不可避免的。人的一生分为了：幼年、少年、青年、中年、老年等阶段，我们需要在不同的阶段去做不同的事。一个 Vue 应用也是如此，只不过它将生命周期的各个阶段用钩子函数替代了，钩子函数内部就是我们需要做的事情。官网的一张图就非常清晰的介绍了一个 Vue 应用或者组件的生命周期：vue生命周期分为四个阶段第一阶段（创建阶段）：beforeCreate，created第二阶段（挂载阶段）：beforeMount（render），mounted。
Vue2 生命周期图示 官方图 图解（个人理解 有误勿喷）
weixin_43569862的博客
06-21 522
vue2官方生命周期图解
vue2的生命周期
Dear_pandy的博客
08-09 1万+
例如。
Vue2生命周期
敲键盘的猫
05-04 1073
这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 {{data}} var myVue=new Vue({ el:"#app-8", data:{ data:"aaaaa", info:"nono" }, beforeCreate:function(
女朋友生日，不要礼物，非要我给她讲解VUE的生命周期钩子函数，最后直夸我讲的详细又透彻！
01-08
VUE的生命周期钩子函数：就是指在一个组件从创建到销毁的过程自动执行的函数，包含组件的变化。可以分为：创建、挂载、更新、销毁四个模块。 注：在组件的整个生命周期内，钩子函数都是可被自动调用的，且生命周期...
【 Vue全家桶 · Vue（二）】Vue实例及其生命周期的完整讲解
JZevin的博客
08-31 450
二. 八大声明周期 beforeCreate 初始化之前，还不可以使用实例方法中的属性和方法 created 初始化完成，可以使用属性和方法 beforeMount 挂在前，判断当前是否有模板 mounted 挂载后，容器就可以使用属性和方法 beforeUpdate 更新前，可以多次执行 updated 更新后，可以多次执行 beforeDestroy 销毁前 Destroy 销毁后 ...
Vue 生命周期 钩子函数
2401_84091110的博客
04-20 924
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。937)]今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
Vue的生命周期和钩子函数（一）——数据初始化
秋水惊鸿的博客
01-19 4684
前言 了解Vue的生命周期和渲染原理，有助于我们深层次的理解钩子函数的作用和调用场景，同时理解当数据发生变化之后，Vue内部做了哪些事情来响应。如果有误，请及时评论，方便完善。码字不易，请尊重版权。本片文章是基于Vue2.X写的，Vue3.0可能对渲及响应做了优化，在此暂不做讨论。 Vue的创建过程 ...
Vue2-生命周期
qq_40792800的博客
06-23 9332
之前说完了Vue的基础知识，说了语法、数据代理、数据监听、计算属性、指令、过滤器等等，但是没有涉及到Vue的声明周期，其实之所以把生命周期放在后面讲，是因为，如果最开始讲生命周期，里面涉及到的概念性东西比较多，初学者不容易理解，只能死记硬背。但是在理解了前面的这些基础知识之后，回过头来理解生命周期，就会很方便了。 这就是 Vue 官网上的生命周期图，在这里 对每个生命周期以及每个模块都标注了tips，可以根据这些图例来辅助理解Vue的生命周期。 源起 new Vue() 当我们通过 new V
Vue2生命周期详细讲解——周期图示、代码演示变化
热门推荐
Concise200的博客
02-24 1万+
结合Vue官网生命周期图示，通过代码调用每个生命周期函数，深刻理解每个生命周期钩子
Vue2 详解生命周期
蜗牛的博客
09-12 1268
最近使用Vue2做了一个项目， 生命周期钩子分别是： beforeCreate:实例刚创建，属性绑定之前 created:实例创建完成，属性绑定，但是还未将实例挂载到'el'上，也就是挂载元素上。 beforeMount:模板编译/挂载前 mounted:模板编译/挂载之后 在mounted请求数据时，将数据更新到已经初始化后的数据里。在这个过程中，会先执行beforeUpdate...
Vue2的生命周期(详解)
Gik99的博客
03-04 1万+
Vue的生命周期(初始化、挂载、更新、销毁)
Vue2 生命周期
C_Goku
01-24 2812
最近使用Vue2做了一个项目，在使用的过程中对数据的请求发生在实例创建哪个阶段有点不清楚，在论坛查阅资料后，对Vue2实例创建生命周期做一个总结。  在最开始，想把数据放在created钩子上进行请求，发现请求的数据并不能挂载到data里面。因为data还没有进行初始化，数据的初始化是在created和beformount之间发生的。所以请求放在mounted钩子，然后将请求到的数据更新到已经初
Vue2生命周期图示
09-15
根据提供的引用，Vue2的生命周期图示如下： beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed 在实例开始初始化时同步调用beforeCreate钩子，此时数据观测、事件等都尚未初始化。然后执行created钩子，在实例创建完成后调用，此时已经完成数据观测、事件等的初始化。 接下来，进行挂载阶段。在beforeMount钩子中，将要替换的元素挂载到Vue实例的$el属性上。然后执行mounted钩子，此时Vue实例已经挂载到页面上，可以进行DOM操作。 在数据更新时，会触发beforeUpdate钩子，在此钩子中可以对更新前后的数据进行操作。然后执行updated钩子，此钩子表示数据更新完成。 当Vue实例被销毁时，会触发beforeDestroy钩子，在此钩子中可以进行一些清理操作，比如解绑事件、销毁定时器等。然后执行destroyed钩子，此钩子表示实例已经完全销毁。 需要注意的是，所有生命周期钩子的this上下文将自动绑定至实例中，所以可以访问data、computed和methods。因此，不应该使用箭头函数来定义生命周期方法，因为箭头函数绑定了父级上下文，this不会指向预期的组件实例。 请参考上述生命周期图示。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值