vue生命周期钩子函数

beforeCreate(实例创建前)

在此生命周期函数执行的时候,data和methods中的数据都还没有初始化,此时尚不能获取dom。

在此阶段可以做一些loading加载事件。

created(实例创建后)

在此生命周期函数中,data和methods都已经被初始化好了,如果要调用 methods中的方法,或者操作data中的数据,最早只能在created中操作。

beforeMount(模板数据载入前)

在此生命周期函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,此时页面还是旧的。

此阶段可以结束loading加载,请求数据,为渲染页面做准备。

mounted(模板数据载入后)

此时页面和内存中都是最新的数据,这个钩子函数是最早可以操作dom节点的方法。

页面的初始数据可以在此阶段定义。

beforeUpdate(页面更新前)

此时页面中显示的数据还是旧的,但是data中的数据是最新的,且页面并未和最新的数据同步。

Updated(页面更新后)

此时页面显示数据和最新的data数据同步。

数据更新时,可以配合watch监听属性做一些逻辑操作。

beforeDestroy(实例销毁前)

当执行该生命周期函数的时候,实例身上所有的data,所有的methods以及过滤器…等都处于可用状态,并没有真正执行销毁。

destroyed(实例销毁后)

此时组件以及被完全销毁,实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。

执行顺序:beforeCreate---->created---->beforeMount---->mounted---->beforeUpdate---->Updated---->beforeDestroy---->destroyed

!注:uni-app中onload周期函数是在beforeCreate和create之间执行的
分界线-----------------------------------------------------------------------------------------

下面两个钩子函数一般配合<keep-alive></keep-alive>使用

activated(组件激活时)

被组件激活时调用。

deactivated(组件未激活时)

被组件停用时调用。

errorCaptured(错误调用)

当捕获一个来自后代组件的错误时被调用。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值