vue生命周期

2021-05-16 本文已影响0人拖孩

beforeCreate
- vue实例的挂在元素el和数据对象data都为undefined，未初始化。
- data methods computed watch都不能访问。
created
- data已初始化，el还未初始化。
- 可以进行初始数据的处理，但无法操作Dom，如果非要操作可以使用nextTick。
beforeMount
- el data都已初始化，为虚拟Dom。
- 虚拟Dom创建完成，即将渲染，可以对数据进行修改，但不触发updated。
mounted
- vue实例挂在完成，渲染完成。
- 真实Dom挂在完成，可以操作Dom，
beforeUpdate
- 响应式数据更新时调用。
- 可以在这里修改数据，不会造成重复渲染。
updated
- 虚拟Dom重新渲染之后调用。
- Dom已经重新更新渲染，在此阶段修改响应式数据可能会造成死循环。
beforeDestroy
- vue实例销毁之前调用。
- 可以正常操作vue实例，在此阶段可以对相关事件销毁、解绑。
destroyed
- vue实例销毁之后调用。
- 所有事件监听器移除，所有子实例都被销毁。