生命周期函数

331769-20180909094731362-16918169.png

生命周期函数就是Vue实例在某一个时间会自动执行的函数

当我们创建一个实例的时候,也就是我们调用new vue()这条语句的时候,vue会帮助我们自动创建一个实例,穿件的过程并不像我们想的那么简单,要经过很多步骤。

  • beforeCreate (el和data都没有被初始化)

    • 组件实例刚刚被创建,组件属性计算之前,如data属性等。
  • created (完成了data书籍的初始化,el没有被初始化)

    • 组件实例创建完成。属性已绑定,但DOM还未生成,$el属性还不存在。

      从上图可以看到beforeCreate之行后,created也被执行了,

      Has 'el' options:是否有el这个选项

      Has 'template' optioins: 是否有template这个属性

      no->Compile el's outerHtml as template: 如果实例里面没有tempalte这个属性,会把外部el挂载点的html当作模板

      yes->Compile template into render functoin: 如果实例里面有tempalte,这个时候就会用template去渲染

      但是有了模板之后并没有直接渲染到页面上,在渲染之前,又自动到去执行了一个函数,这个函数是beforeMount

  • beforeMount(完成了el和data的初始化)

    • 模板编译|挂载之前

      Create vm.$el and replace 'el' width it: 模板结合数据会被挂载到页面上,当dom挂载到页面之上,这个时候又有一个生命周期函数被执行了

  • mounted (完成挂载)

    • 模板编译|挂载之后
  • beforeUpdate

    • 组件更新之前

      数据发生改变,还没有被渲染之前,beforeUpdate会被执行

  • updated

    • 组件更新之后

      当数据重新渲染之后,updated这个生命周期函数会被执行

  • activated

    • for keep-alive,组件被激活时被调用
  • deacativated

    • for keep-alive,组件被移除时被调用
  • beforeDestory

    • 组件销毁前调用
  • destoryed

    • 组件销毁后调用

生命周期总结:
beforecreate : 可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

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

推荐阅读更多精彩内容

  • beforeCreate 1 .实例初始化之后2 .this指向创建的实例3 .数据观测,event/watche...
    skoll阅读 1,325评论 1 1
  • // 生命周期(钩子函数 hook)函数就是vue实例在某一个时间点会自动执行的函数 //此时vue实...
    一夕烟雨阅读 468评论 0 0
  • 先看完函数介绍,在看下面的生命周期函数图示把 beforeCreate 第一个生命周期函数,表示实例完全被创建出来...
    IT小池阅读 907评论 0 13
  • 生命周期函数(钩子)(事件) 生命周期图示 var vm= new Vue表示开始创建一个vue实例 init E...
    2764906e4d3d阅读 1,976评论 0 0
  • 胸部: 1:俯卧撑:建议30个一组,动作要标准。4组左右。同时可以练到肱三头。 2:双臂屈伸:在家可用两个椅子代替...
    快乐的健身阅读 318评论 0 0