Vue钩子函数

方法里面运用到Vue的8大钩子函数

1- beforeCreate:创建前状态,el 和 data 并未初始化 (此方法不常用)

2- created:创建完毕状态,完成了 data 数据的初始化,el的初始化未完成。用来发送ajax

3- beforeMount:挂载前状态,(执行此方法时已经完成了 el 和 data 初始化 (已经赋予了对应的值)) 渲染DOM之前先确认下是否有要编译的根元素(有无el属性),有才继续确认是否具有模板属性template,如果有模版属性,则会用template的值替换掉HTML中的结构,template模版中只能有一个根元素(而且不能是文本);

4- mounted:挂载结束状态,(执行此方法时代表已经挂载结束了)

把编译好的数据挂载到DOM元素上,最后渲染成真实的DOM元素;真实DOM已经渲染完成,可以操作DOM了

5- beforeUpdate:更新前状态,当页面依赖的数据更改之后触发(此时DOM结构还没有重新加载)

6- updated:更新完成状态,DOM结构重新加载之后触发

调用vm.$destroy()之后触发下面两个事件:

7- beforeDestroy:销毁前状态,实例销毁之前调用。在这一步,实例仍然完全可用。(可在此处清除定时器,清除事件绑定)

8- destroyed:销毁完成状态,Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。(意义不大)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 记录平时学到的知识,标题写的大气一点,也算是给自己一点鼓励,希望在技术这条路可以远走越远,路越走越宽~ 文中...
    徐国军_plus阅读 5,579评论 3 28
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,653评论 0 6
  • 实例生命周期钩子 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生...
    Autumn_2460阅读 3,547评论 0 2
  • 文/吉小舒 单亲犹太妈妈沙拉在家里实行“有偿生活机制”,三个孩子的生活学习开支需要自己付出劳动赚取金钱来维持。这听...
    吉小舒阅读 3,638评论 8 5
  • 桦树女孩 赫哲族栖息地,大片大片的桦树林,与族人相依而生。 桦树林孕育一种女孩,白天为树,夜晚为女,妩媚明艳,常引...
    当小时呀阅读 2,682评论 0 0