生命周期

  • 组件实例化
  • 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
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容