vue生命周期每个阶段可以做,请详细说下你对vue生命周期的理解

  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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: