vue中的生命周期

首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期,下面这张图是从vue官网扣过来的,就是演示的vue的生命周期:
在这里插入图片描述

所以我们可以知道vue的生命周期有以下几个:

  • beforeCreate 创建前
  • created 创建后
  • beforeMount 载入前
  • mounted 载入后
  • beforeUpdate 更新前
  • updated 更新后
  • beforeDestroy 销毁前
  • destroyed 销毁后

就是可以分成:创建前/后,载入前/后,更新前/后,销毁前/后,8个阶段。
创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在

Vue生命周期函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。beforeCreate是在Vue实例被创建之前调用的,此时data和methods还未初始化,不能访问DOM,可以在此函数进行一些初始化的操作。created是在Vue实例被创建之后调用的,此时data和methods已经初始化完成,可以访问DOM,可以在此函数请求数据、更新数据等操作。beforeMount是在Vue实例挂载到DOM之前调用的,此时模板还未编译成DOM,可以在此函数进行一些准备工作。mounted是在Vue实例挂载到DOM之后调用的,此时模板已经编译成DOM,可以进行DOM操作。beforeUpdate是在数据更新之前调用的,可以在此函数进行一些更新前的操作。updated是在数据更新之后调用的,可以在此函数进行一些更新后的操作。beforeDestroy是在Vue实例销毁之前调用的,可以在此函数进行一些清理工作。destroyed是在Vue实例销毁之后调用的,此时Vue实例已经完全销毁,可以进行一些最终的清理工作。123 #### 引用[.reference_title] - *1* *3* [Vue生命周期函数详解](https://blog.csdn.net/wen110898/article/details/120520844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] - *2* [Vue 生命周期函数](https://blog.csdn.net/xyfck/article/details/126909930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值