王文健的博客笔记


请多指教

vue生命周期简记

写在前面

如题,vue的生命周期是vue理解的重要一环,弄明白它不只会加深对vue的理解,在实际开发中也会更加得心应手,在此记录写项目开发中体会到的一些经验,只是总结 并不全面,想要详细学习网上关于vue生命周期学习的文章很丰富

lifecycle.png

生命周期

  • beforeCreate:创建前,new操作,已绑定事件,还没有数据,不能处理数据
  • created:创建,可以处理数据
  • beforeMounted:挂载前,准备把创建的挂载到el上,有el才去执行挂载
    挂载前的el仍是<div id="app"></div>
  • 有template转化后执行render funcion再去渲染
    cli中的.vue文件中的template是通过vue-loader直接转化直接执行render funcion的减少耗时
  • mounted:挂载,挂载后$el就是渲染后的<div>123</div>,挂载前后中间执行render funcion
  • beforeUpdated:更新前,数据变化
  • updated:更新
  • beforeDestroy:销毁前,组件被销毁,或手动销毁
  • destroy:销毁

注:
挂载前的钩子里获取不到el的,想对如data中的数据进行操作最早要在created里;
一般在createdmounted钩子里写一些页面渲染前的操作,比如数据请求;
有些传统的第三方库在使用后需要在组件销毁时手动删除其创建的对象在destroy

没有代码
最后附上一张以前看到的一张图
生命周期表.png

未经允许不得转载:王文健的博客笔记 » vue生命周期简记

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
Copyright & copy; 2018 @王文健. All rights reserved.

小编留言

本网站是作者学习路上的一个见证,记录和敦促我的学习生活,也希望借此结交更多前辈好友。记录作者在学习生活的点点滴滴,愿与你一同进步,共勉!

Copyright & copy; 2018 @王文健. All rights reserved.

感谢 WordPress DUX 提供的参考模板与设计,阿里云提供的优质云服务,使我完成本网站的制作