生命周期
2019-05-20 本文已影响0人
jiangzj
- 组件实例化
-
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