Vue生命周期基本理解
- Vue2 Options API
- beforeCreate:创建实例前调用,此时数据与函数还没生成
- created:实例创建完成后调用,数据观测完成,但dom实例还未创建,组件还未渲染。可进行数据初始化,异步请求,调用接口等操作。
- beforeMount:渲染组件前调用 虚拟dom已经创建完成 template模板也已导入render函数 可以进行数据更改 不会触发updated 但还未进行挂载 渲染组件 不能进行dom操作
- mounted:渲染组件后调用组件渲染完成并挂载 可进行dom操作 例如事件监听器等
- beforeUpdate:数据更新前调用 此时虚拟dom打补丁前的阶段
- updated:数据更新完成调用 这个阶段不要进行数据更改 否侧容易进入死循环
- beforeDestory:实例卸载前调用 此时可以进行清理一些实例等操作 如清理定时器
- destoryed:实例卸载后调用 此时虚拟dom是一个空壳 所有的实例都已被清理
- Vue3 Composition API
- setup:对标beforeCreated
- onBeforeMount:对标beforeMount
- onMounted:对标mounted
- onBeforeUpdate:对标beforeUpdate
- onUpdated:对标updated
- onBeforeUnmount:对标beforeDestory
- onUnmounted:对标destoryed