vue的生命周期实例

牧云@^-^@ 提交于 2020-01-30 11:35:05
Vue在GitHub上面的star数量已经超过了react,虽然npm包下载的数量还没有react多,但是Vue上升的势头真的很猛。

今天简述一下vue实例的生命周期,生命周期就是从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
首先vue官网中的生命周期图例。
在这里插入图片描述
生命周期钩子 = 生命周期函数 = 生命周期事件
一共有8个生命周期钩子
创建之前 beforecreat :创建了vue实例,页面还没有生成DOM
创建 created:data数据都初始化好了,Dom也已经加载完了
页面初始化data数据(页面还没有拿到{{}}中间的值,并且渲染)
页面初始化data的值之前: beforemount 页面还没有拿到插值表达式中间的值,并且渲染
页面初始化data的值 mounted(页面中的DOM{{}}中的值这些都已经初始化好)
修改数据
修改数据之前 beforeUpdate:修改双向绑定,data的值修改了,但是没有渲染
修改数据 updated:修改完成,data中数据已经修改并且渲染好
销毁
销毁之前 beforedestory:销毁之前都会执行
已经销毁 destoryed:销毁
在这里插入图片描述这个vue生命周期图来自传智播客老师。
详细演示参考vue.js官网
笔者作为一个新人,翻看和欣赏了大神的笔记后,自己总结加工,发表一下自己浅薄的见解,如果哪里说得不对,希望读者能提出批评和指正,本人表示诚心的感谢。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!