vue2生命周期与属性执行顺序

    0
  • new Vue()
  • Before created
  • Inject
  • props
  • methods
  • data
  • computed
  • Watch
  • Provide
  • Created
生命周期描述
beforeCreate组件实例被创建之初,组件的属性生效之前
created组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用
beforeMount在挂载开始之前被调用:相关的 render 函数首次被调用
mountedel 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update组件数据更新之后
activitedkeep-alive 专属,组件被激活时调用
deactivatedkeep-alive 专属,组件被销毁时调用
beforeDestory组件销毁前调用
destoryed组件销毁后调用

1613697897431cF1pJF 16136997872597dH8hr 16106245413564IfCH9 for-if-once

父子组件

加载渲染

  1. 父beforeCreate->
  2. 父created->
  3. 父beforeMount->
  4. 子beforeCreate->
  5. 子created->
  6. 子beforeMount->
  7. 子mounted->
  8. 父mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

#讨论区
00条评论
实时对话
loading...