vue生命周期简记

6次阅读

共计 627 个字符,预计需要花费 2 分钟才能阅读完成。

写在前面
如题,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–>
没有代码最后附上一张以前看到的一张图

正文完
 0