vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程
vue2的生命周期包括8个过程:
- beforeCreate(创建前)
- created(创建后) 此时已经完成props,data,methods的创建
- beforeMount(载入前)
- mounted(载入后) 此时Dom渲染是在mounted完成之后
- beforeUpdate(更新前)
- updated(更新后)
- beforeDestroy(销毁前)
此处是准备在销毁之前调用的钩子,数据props,data,methods都可以访问,但是DOM已经被移除了 - destroyed(销毁后)
vue3生命周期
- setup():开始创建组件之前,在beforCreate和created之前执行创建的是data和method
- onBeforeMount() 相当于 vue2.x 中 beforeMount
- onMounted() 相当于 vue2.x 中 mounted
- onBeforeUpdate() 相当于vue2.x中的beforeUpdate
- onUpdated() 相对于vue2.x中的updated
- onBeforeUnmounted() 相对于vue2.x中的beforeDestroy
- onUnmounted() 相对于vue2.x中的destroyed
- onActived()
- onDeactived()
- onErrorCaptured()
vue2和vue3区别
Vue2-------------Vue3
| vue2 | vue3 |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onbeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
vue2的双向数据绑定用的是Object.defineProperty对数据进行劫持,而vue3是proxy。