生命周期Vue2 / Vue3区别 (11个)

13 篇文章 2 订阅

结论: 

生命周期的优点
生命周期让我们在控制整个vue时更容易形成更好的逻辑,
四个阶段,11个钩子函数,创建前后、挂载阶段、更新阶段、销毁阶段
分别有:
创建前:beforeCreate() data和methods不可使用
创建后:Created() 可以使用data和methods不能使用dom

挂载前:beforeMount() data,methods可以使用但是不能使用dom
挂载后:Mounted() dom渲染完毕可以使用dom

更新前:beforeUptate() 当data的数据导致dom发生改变会执行这个钩子,
更新后:Updated() 

销毁前:beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的,可以做一些释放内存的操作
销毁后:Destroyed() 已经销毁完毕

这两个生命周期是当使用keep-alive之后才会生效

            activated() { }//组件激活时触发的生命周期
            deactivated() { }//组件失活时触发的生命周期

errorCaptured(){}:当捕获一个来自子孙组件的错误时被调用,此钩子会收到三个参数:
错误对象、发生错误的组件实例、包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。

Vue3.0中的生命周期做了一些改动:
beforeCreate  -> setup()	
created       -> setup()
beforeMount   -> onBeforeMount	组件挂载到节点上之前执行的函数。
mounted       -> onMounted	组件挂载完成后执行的函数
beforeUpdate  -> onBeforeUpdate	组件更新之前执行的函数。
updated       -> onUpdated	当data的数据导致dom发生改变会执行这个钩子。
beforeDestroy -> onBeforeUnmount销毁前
destroyed     -> onUnmounted	组件卸载
errorCaptured -> onErrorCaptured 捕获错误

 解释:

beforeCreate

 vue组件实例对象已经创建完毕但是 data methods里面的内容还没有准备好 不可用 

created

data methods 可以用, dom对象不可用

// data methods 数据可以用 dom对象元素不可用

 //html
   <div class="div">{{msg}}</div>
 //js
    created() { 
               
                let el = document.querySelector('.div')
                    console.log(el);//undefined
            },

 beforeMount 

data methods 可以用, dom对象不可用

 mounted() {     },

这时候真实dom已经渲染完毕 可以获取dom对象

 beforeUpdate

 当数据更新导致的dom更新或者打补丁之前触发的生命周期
细节 重点 当数据更新不会触发beforeUpdate(){},
当数据更新导致的dom更新或者打补丁之前触发的生命周期才会触发  !!!

updated

当数据更新导致的dom更新或者打补丁之后触发的生命周期

 keep-alive

 这两个生命周期是当使用keep-alive之后才会生效

            activated() { // 组件激活时触发的生命周期



            },

            deactivated() { // 组件失活时触发的生命周期



            },

beforeDestroy

组件页面销毁前

destroyed

组件页面销毁

errorCaptured

当捕获一个来自子孙组件的错误时被调用,此钩子会收到三个参数:
错误对象、发生错误的组件实例、包含错误来源信息的字符串。
此钩子可以返回 false 以阻止该错误继续向上传播。

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龙雨溪 彩色之外

你的打赏是我创作的氮气加速动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值