生命周期

  • 组件实例化
  • beforeCreate
    此时数据还不是响应式,更新 data 数据是无效的,也无法访问 DOM。
  • 数据观测 (data observer)
  • 计算属性、方法、watch/event 事件回调
  • created
    此时数据是响应式,不能访问 DOM。网络数据请求操作适合放在此处。
  • 模板或渲染函数已经编译好
  • beforeMount
  • DOM 挂载
  • mounted
    此时可以访问 DOM 节点,例如this.$el,DOM 相关的操作适合放在此处。
  • beforeUpdate
    此时访问 DOM 是数据变化前对应的 DOM
  • DOM 更新之前
  • updated
    此时可访问更新后的 DOM 节点,DOM 与 data 数据一致。
  • beforeDestroy
    此时实例仍然完全可用。
  • 组件销毁
  • destroyed
    此时组件所有东西都已解绑,所有的事件监听器都已被移除,还能访问 DOM。
父子组件情形
[parent] beforeCreate 
[parent] created 
[parent] beforeMount 
[child ] beforeCreate 
[child ] created 
[child ] beforeMount 
[child ] mounted 
[parent] mounted

[parent] beforeUpdate 
[child ] beforeUpdate 
[child ] updated 
[parent] updated 

[parent] beforeDestroy 
[child ] beforeDestroy 
[child ] destroyed 
[parent] destroyed  

你可能感兴趣的:(生命周期)