- 组件实例化
-
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