vue中的生命周期

生命周期总览

1. beforeCreate

当前生命周期是在vue实例对象创建之前的状态,此时 data , props, method 中的参数或者方法都不能使用
在这里插入图片描述
在beforeCreate中没有找到参数 XXX 的定义

beforeCreate(){
//	打印 props
	console.log(this.v1);
//  打印 data
	console.log(this.v2);
//  执行方法
	this.show();
}

2.created

而在此状态,我们就可以去使用一些方法来使页面初始化了,我们在created中定义 init 方法来进行页面参数的初始化,可以看到
data/props 中的值可以被显示, methods 中的方法可以被执行,但是在此阶段页面模板并没有生成
在这里插入图片描述
在这里插入图片描述
但是我们控制台打印发现,一直到beforeUpdata 阶段this.users的长度才会被打印出来
在这里插入图片描述
所以在生命周期 参数初始化阶段,created,beforeMount,mounted 阶段我们称之为 初始化阶段,这里可以定义一些方法
来做值的初始化定义

所以在此声明周期当中我们做的最多的就是发送ajax/jquery/axios 请求后台服务的接口,并把数据转存到data当中,供template 模板使用!

3.beforeMount

在这里插入图片描述

4. mounted

在这里插入图片描述

5.beforeUpdate

在这里插入图片描述
仅仅获取了数组的长度,但是数组当中还没有值

6.updated

在这里插入图片描述
数组的值已经出现

7.beforeDestory

控制台没有打印任何值
在这里插入图片描述

8.destory

控制台没有打印任何值
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值