盘点 Vue 的生命周期每个阶段都做了哪些事儿

盘点 Vue 的生命周期每个阶段都做了哪些事儿

Vue2

beforeCreate: 这个阶段还不能访问 data 中的属性以及 method 中的方法,因为 Vue 实例还没有初始化成功。
created: 此时 Vue 的实例已经挂载完毕,可以访问 datamethod 了,一般在这里发起 axios 网络请求并赋值给 data 中的数据。但是还不能获取或修改 dom 元素,因为 dom 还没有挂载成功。如果情况特殊,可以使用 nextTick 来操作 dom
beforeMount: 此时还是无法获取 dom,因为 dom 还没有挂载到页面上。
mounted: 到这一步 dom 就挂载成功了,可以进行操作了。
beforeUpdate: 此时 Vue 中数据虽然发生了变化,但页面还没开始重新渲染
Updated: 这时候页面重新渲染完成,数据是最新的
beforeDestroy: 此时 Vue 实例仍然可用,可以访问 datamethod 等,一般在这里进行一些清理工作或者在销毁之前做一些操作
destroyed: 此时 Vue 的实例已经被销毁了,不能再访问 datamethod

Vue3

Vue2 -> Vue3
V3V2 的生命周期大同小异,只是语法略有改变

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured
评论区
头像