vue生命周期?

vue生命周期就是`vue实例从创建到销毁的整个过程`我们称之为vue的生命周期,通过vue的生命周期我们可以在不同的阶段进行不同的逻辑操作. vue生命周期常用的钩子函数一共有8个,分别对应的钩子函数为beforeCreate 创建前、 created创建后、beforeMount 挂载前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后, `页面一开始加载的时候就会触发创建前后和挂载前后的钩子函数`, 而更新的钩子函数需要当我们改变data的时候才能触发,销毁的钩子函数必须得当组件进行切换的时候就会进行销毁.在项目开发过程中,我经常使用到的钩子函数有created,我们经常`在created进行数据请求,或者获取本地存储的数据`,还有一些其他的操作. 除了created还有mounted,我们经常`在mounted里面获取dom元素` (有时候也存在获取不到dom元素的情况,这个时候我们一般用$nextTick方法来解决).

每个生命周期钩子具体发生的事情:

⑴beforeCreate(创建前):在此生命周期函数执行的时候,data 和 methods 中的数据都还没有初始化。

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

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

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

⑸beforeUpdate(更新前):此时页面中显示的数据还是旧的,但是 data 中的数据是最新的,且页面并未和最新的数据同步。

⑹Updated(更新后):此时页面显示数据和最新的 data 数据同步。

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

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

//下面两个钩子函数一般配合使用

⑼activated(组件激活时):和上面的 beforeDestroy 和 destroyed 用法差不多,但是如果我们需要一个实例,在销毁后再次出现的话,用 beforeDestroy 和 destroyed 的话,就太浪费性能了。实例被激活时使用,用于重复激活一个实例的时候

⑽deactivated(组件未激活时):实例没有被激活时。

⑾errorCaptured(错误调用):当捕获一个来自后代组件的错误时被调用

结合实践:

**beforeCreate**:通常用于插件开发中执行一些初始化任务

**created**:组件初始化完毕,可以访问各种数据,获取接口数据等

**mounted**:dom已创建,可用于获取访问数据和dom元素;访问子组件等。

**beforeUpdate**:此时`view`层还未更新,可用于获取更新前各种状态

**updated**:完成`view`层的更新,更新后,所有状态已是最新

**beforeDestroy**:实例被销毁前调用,可用于一些定时器或订阅的取消

**destroyed**:销毁一个实例。可清理它与其它实例的连接,解绑它的全部指令及事件监听器

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值