vue2和vue3生命周期

1,190 阅读1分钟

vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程

vue2的生命周期包括8个过程:

  1. beforeCreate(创建前)
  2. created(创建后) 此时已经完成props,data,methods的创建
  3. beforeMount(载入前)
  4. mounted(载入后) 此时Dom渲染是在mounted完成之后
  5. beforeUpdate(更新前)
  6. updated(更新后)
  7. beforeDestroy(销毁前) 此处是准备在销毁之前调用的钩子,数据props,data,methods都可以访问,但是DOM已经被移除了
  8. destroyed(销毁后)

vue3生命周期

  1. setup():开始创建组件之前,在beforCreate和created之前执行创建的是data和method
  2. onBeforeMount() 相当于 vue2.x 中 beforeMount
  3. onMounted() 相当于 vue2.x 中 mounted
  4. onBeforeUpdate() 相当于vue2.x中的beforeUpdate
  5. onUpdated() 相对于vue2.x中的updated
  6. onBeforeUnmounted() 相对于vue2.x中的beforeDestroy
  7. onUnmounted() 相对于vue2.x中的destroyed
  8. onActived()
  9. onDeactived()
  10. onErrorCaptured()

vue2和vue3区别

Vue2-------------Vue3

vue2vue3
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonbeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

vue2的双向数据绑定用的是Object.defineProperty对数据进行劫持,而vue3是proxy。