vue生命周期

本文详细介绍了Vue组件的四个生命周期阶段:创建、挂载、更新和销毁,以及对应的生命周期钩子函数。强调了在不同阶段执行初始化任务和发送axios请求的最佳时机,如在`mounted()`钩子中进行DOM操作和数据请求。同时提醒了在`created()`中请求数据可能存在的风险,确保在数据更新和销毁组件时的正确处理。
摘要由CSDN通过智能技术生成

一、组件生命周期

组件生命周期:一个组件或一个"页面"加载过程中所经历的每个阶段。

今后只要希望在页面或组件加载完成后自动执行一些初始化任务时就需要用到组件页面的生命周期.

四个阶段

(仅以new Vue()举例)

(1)创建(create)阶段(必经).
a.创建new Vue()对象.
b.加载data对象到new Vue()中。
c.暂时没有虚拟DOM树,可能无法执行DOM操作

(2)挂载(mount)阶段
a.根据el所指扫描页面,并首次将data中的变量值渲染到页面显示.
b.既有data,又有虚拟DOM树,既可以操作data中的变量,又可以对页面执行DOM操作.

(3)更新(update)阶段(只有在data中的变量被修改后才自动触发)

(4)销毁(destroy)阶段 (只有手动调用$destroy()函数,销毁当前组件时才自动触发)

生命周期钩子函数

在每个生命周期阶段自动触发的特定的回调函数(类似于Dom 中的事件处理函数)

只要希望在特定的生命周期阶段执行一些操作时,都要把操作写在对应的生命周期钩子函数内,才能自动触发.

过程:

beforecreate()
创建(create)
created() //可发送axios请求,此时也有data,如果请求回来数据,返回到data中,自动更新到页面上
风险:万一axios回来快,后续mount阶段还没完成,无法进行DOM操作

beforemount()
挂载(mount)
mounted() //最稳妥的发送axios请求时机:既有data又可以进行DOM操作

beforeupdate()
更新(update)
updated()

beforedestroy()
销毁(destroy)
destroyed

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

你脸上有BUG

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明:

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

余额充值