写在前面

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

<!--more-->

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

<!--more-->

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_24822.html