vue生命周期每个阶段可以做,请详细说下你对vue生命周期的理解
本文主要详细介绍了Vue的生命周期。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下,希望能帮到你。
目录
生命周期简介beforeCreate和createdbeforecreate()mount前created()和mounted dbefremount()mounted()(重要)beforeUpdate和updatedbeforeUpdate()update D()before Destroy()destroy()destroy()重要)destroy()摘要
生命周期
生命周期的简单介绍
1.生命周期也叫:生命周期回调函数,生命周期函数,生命周期钩子。
2.生命周期是:Vue在关键时刻呼唤我们的一些有特殊名字的功能。
3.生命周期函数的名称不能更改,但函数的具体内容由程序员根据需求编写。
4.这在生命周期函数中指向vm或组件实例对象。
在Vue官网的教学中,Vue instance=instance life cycle的钩子中列出了8个生命周期函数。
分别是:
1 .创建之前()
2 .已创建()
3.beforeMount()
4.mounted()(强调)
5 .更新之前()
6 .更新()
7.beforeDestroy()(强调)
8 .销毁()
这八个生命周期函数涵盖了Vue实例从创建到销毁的过程,即创建前、创建后、挂载前、挂载后、更新前、更新前、销毁前、销毁后。
beforeCreate与created
beforeCreate()
使用beforeCreate时,无法通过vm访问data中的数据和methods中的方法,因为创建尚未完成。
created()
当使用created时,由于创建已经完成,所以可以通过vm访问data中的数据和methods中的方法。
beforeMount与mounted
beforeMount()
在使用beforeMount时,由于Mount还没有完成,此时页面上呈现的内容是没有经过Vue编译的DOM结构,在此时对DOM的所有操作最终都不奏效。不奏效的原因是当运行到mounted时,系统会将内存中的虚拟DOM转为真实DOM插入页面,因此修改的内容会被覆盖。。
mounted()(重要)
使用mounted时,此时mount已经完成,页面渲染的内容会变成Vue编译的DOM。同时,对DOM的所有操作都是有效的。运行至此,初始化过程结束。这里一般执行以下操作:启动定时器、发送网络请求、订阅消息等初始化操作。
beforeUpdate与updated
当数据发生变化时,将使用beforeUpdate和updated进行更新
beforeUpdate()
使用beforeUpdate时,此时更新尚未完成,数据已成功获取,但尚未显示在页面中。所以会出现以下现象:数据是新的但是页面上显示的是旧的数据。此时,页面尚未与数据同步。
updated()
当使用updated时,它已经被更新。此时数据是新的,页面显示新的数据。此时,页面与数据同步。
beforeDestroy与destroyed
当要销毁Vue实例时,将使用beforeDestroy和Destroy来销毁它。
beforeDestroy()(重要)
当使用beforeDestroy时,此时Vue实例没有被完全销毁,数据、方法、指令等。在虚拟机中仍然可用。但是,此时不会通过修改数据来更新页面。通常在这个阶段,会执行关闭定时器、取消订阅信息、取消绑定自定义事件等操作。在这八个生命周期函数中,广泛使用的是beforeDestroy和mounted。
destroyed()
当使用destroyed时,Vue实例被完全销毁。
总结
本文到此为止。希望能帮到你,也希望你能多关注我们的更多内容!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。