vue生命周期简记

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

生命周期

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里;一般在created和mounted钩子里写一些页面渲染前的操作,比如数据请求;有些传统的第三方库在使用后需要在组件销毁时手动删除其创建的对象在destroy中
<!–more–>
没有代码最后附上一张以前看到的一张图

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理