博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue生命周期钩子函数
阅读量:5046 次
发布时间:2019-06-12

本文共 1093 字,大约阅读时间需要 3 分钟。

 

 

 

  • beforeCreate:在实例初始化之后,**数据观测(data observer) ** 和 event/watcher事件配置 之前被调用,注意是 之前,此时data、watcher、methods统统滴没有。

    这个时候的vue实例还什么都没有,但是$route对象是存在的,可以根据路由信息进行重定向之类的操作。

  • created:在实例已经创建完成之后被调用。在这一步,实例已完成以下配置:数据观测(data observer)属性和方法的运算watch/event 事件回调。然而,挂载阶段还没开始,$el属性目前不可见。

    此时 this.$data 可以访问,watcher、events、methods也出现了,若根据后台接口动态改变data和methods的场景下,可以使用。

  • beforeMount:在挂载开始之前被调用,相关的 render 函数 首次被调用。但是render正在执行中,此时DOM还是无法操作的。我打印了此时的vue实例对象,相比于created生命周期,此时只是多了一个$el的属性,然而其值为undefined。

    使用场景我上文已经提到了,页面渲染时所需要的数据,应尽量在这之前完成赋值。

  • mounted:在挂载之后被调用。在这一步 创建vm.$el并替换el,并挂载到实例上。(官方文档中的 “如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内” 这句话存疑)

    此时元素已经渲染完成了,依赖于DOM的代码就放在这里吧~比如监听DOM事件。

  • beforeUpdate:$vm.data更新之后,虚拟DOM重新渲染 和打补丁之前被调用。

    你可以在这个钩子中进一步地修改$vm.data,这不会触发附加的重渲染过程。

  • updated:虚拟DOM重新渲染 和打补丁之后被调用。

    当这个钩子被调用时,组件DOM的data已经更新,所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data,否则会继续触发beforeUpdate、updated这两个生命周期,进入死循环!

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

    实例要被销毁了,赶在被销毁之前搞点事情吧哈哈~

  • destroyed:Vue实例销毁后调用。此时,Vue实例指示的所有东西已经解绑定,所有的事件监听器都已经被移除,所有的子实例也已经被销毁。

    这时候能做的事情已经不多了,只能加点儿提示toast之类的东西吧。

转载于:https://www.cnblogs.com/lmyt/p/9877298.html

你可能感兴趣的文章
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>
Web框架和Django基础
查看>>
python中的逻辑操作符
查看>>
CSS兼容性常见问题总结
查看>>
HDU 1548 A strange lift (Dijkstra)
查看>>
每天一个小程序—0005题(批量处理图片大小)
查看>>
IIS的各种身份验证详细测试
查看>>
JavaScript特效源码(3、菜单特效)
查看>>
Linux常用命令总结
查看>>
yii模型ar中备忘
查看>>
C#线程入门
查看>>
CSS清除浮动方法
查看>>
JVM内存回收机制简述
查看>>
洛咕 P2480 [SDOI2010]古代猪文
查看>>
js-创建对象的几种方式
查看>>