2018-04-17(vue学习小结--生命周期)

vue的生命周期分为8个: beforeCreate,created>beforeMount,mounted>beforeUpdate,update>beforeDestory,destoryed;

当我们创建一个vue实例时(new Vue())时,首先执行init(vue组件默认执行),在执行过程中,调用了beforeCreate,然后再执行rejections和reactivity的时候,又去调用了created;在init的时候,事件已经调用了,因此不要在beforeCreate中去修改data,最早也要在created中区修改(添加某些行为);

在created完成之后,vue会首先是判断实例中是否有el这个配置项,如果有就执行下去,如果没有,就会执行vm.$mount(el);然后再去判断是否有template这个配置项,如果有,就会将template解析成render函数,render函数在beforeMount和mounted之间执行,因此在beforeMount的时候,el还只是一个html里写的元素,在mounted的时候才将渲染出来的内容挂载在DOM节点上面,这中间其实是执行了render function的内容。

beforeMount只有在有了render function的时候才会执行,当执行完了render function的时候,就会执行mounted将渲染出来的内容挂在到DOM节点上。

当数据有变化是,会触发beforeUpdate,通过vm判断是否更新,通过update更新组件。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务 处理逻辑、数据...
    云中一樵夫阅读 1,145评论 0 1
  • 为荷而来 为荷而来 为藕而来 酷热的盛夏 荷花随之而至 荷花纤纤出水尘不染 自擎乳白一片天 傲向斜风承雨露 荷花清...
    李家长安阅读 356评论 0 1
  • 我很喜欢主编这次课程里设的小练习 把生活里的事情串起来 串起来 你会发现那个隐藏在生活表面下的看不见的线 也得以有...
    郭小果子阅读 428评论 0 0
  • August一格阅读 176评论 0 0
  • 小北是一个伪文艺假坚定实际耳根软的姑娘,她常挂在嘴边的一段话便是:自己做的决定,便是爬也要爬完。置之死地而后生,我...
    山枕败北阅读 317评论 0 3

友情链接更多精彩内容