五.Vue.js实例属性选项-生命周期钩子

Vue创建实例化参数配置中,生命周期钩子有 beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、actived、deactived、errorCaptured

1. beforeCreate (使用频率低)

实例化创建之前,没有实例化,访问不到数据(不能访问data等属性

应用场景:页面拦截,权限验证、加个loading事件

2. created (使用频率高)

创建实例化完成,可以访问/修改数据、修改数据不会触发updated beforeUpdate钩子函数(能访问data等属性),不能访问el,要进行dom操作可通过

Vue.nextTick

应用场景:结束loading件、进行ajax请求异步数据的获取、初始化数据

3. beforeMount

dom载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位符,render函数首次被调用,简单理解为把模板编译成的html未把vue数据绑定到dom(能访问data)

4. mounted

载入后,把真实的dom挂载到页面(能访问data等属性),渲染html,不保证渲染所有子类,可通过Vue.nextTick等到整个视图都渲染完毕

应用场景:挂载元素dom节点的获取、dom操作(document.getElementById("name"))、插件使用、后端请求,拿回数据

5. beforeUpdate (不要在update beforeUpdate修改不定数据,否则会引起死循环)

数据更新之前调用(view层的数据变化前,不是data中的数据改变前),发生在虚拟DOM重新渲染,简单理解为界面需要绑定数据,更改数据时才会触发,若界面没绑定,只是数据变化不会触发

应用场景:组件更新前

6.updated

数据更新完成,dom也从新render完成。简单理解为界面需要绑定数据,更改数据时才会触发,若界面没绑定,只是数据变化不会触发

应用场景:统一的业务逻辑处理

7. beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用

应用场景:清除计时器、清除非指令绑定的事件、你确认删除XX吗?

8. destroyed

实例销毁后调用。在这一步,Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁

应用场景:当前组件已被删除,清空相关内容

9. actived(使用频率较低)

被 keep-alive 缓存的组件激活时调用,在生命周期created、mounted后执行

10. deactived

停用被 keep-alive 缓存的组件激活时调用,与actived用法一样

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值