Vue生命周期基本理解

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