vue3生命周期执行顺序和调用时机
时间: 2023-11-04 15:59:01 浏览: 66
在Vue 3中,生命周期钩子函数的执行顺序和调用时机与Vue 2有所不同。下面是Vue 3中生命周期钩子函数的执行顺序和调用时机:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。
2. created:在实例创建完成后调用,此时实例已完成以下配置:数据观测(data),属性和方法的运算,watch/event事件回调。但是$el属性还没有被创建。
3. beforeMount:在挂载开始之前调用,此时模板编译/挂载尚未开始。
4. mounted:在挂载完成后调用,此时DOM已经被完全渲染出来。
5. beforeUpdate:在响应式数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。这里适合在更新之前访问现有的DOM,比如手动移除已添加的事件监听器。
6. updated:在虚拟DOM重新渲染和打补丁之后调用。
7. beforeUnmount:在卸载之前调用,在这个阶段,实例仍然完全可用。
8. unmounted:在卸载完成之后调用,此时实例已经被销毁。
相关问题
vue3生命周期执行顺序
在Vue3中,组件的生命周期函数被重命名为钩子函数,并且有了一些新的钩子函数。下面是Vue3中组件的钩子函数执行顺序:
1. `beforeCreate`: 组件实例刚被创建,数据观测和事件配置之前调用。
2. `setup`: 在组件实例创建之后,数据观测和事件配置之前调用。它接收 `props`,并返回一个渲染函数以及其它的一些响应式数据。
3. `created`: 组件实例创建完成,数据观测和事件配置完成之后调用。
4. `beforeMount`: 在组件挂载到DOM之前调用。
5. `onBeforeMount`: 在组件挂载到DOM之前调用,与 `beforeMount` 同时只会执行其中一个。
6. `mounted`: 在组件挂载到DOM之后调用。
7. `onMounted`: 在组件挂载到DOM之后调用,与 `mounted` 同时只会执行其中一个。
8. `beforeUpdate`: 在组件更新之前调用,但是在数据更新之前。
9. `onBeforeUpdate`: 在组件更新之前调用,但是在数据更新之前,与 `beforeUpdate` 同时只会执行其中一个。
10. `updated`: 在组件更新之后调用,但是在DOM重新渲染之前。
11. `onUpdated`: 在组件更新之后调用,但是在DOM重新渲染之前,与 `updated` 同时只会执行其中一个。
12. `beforeUnmount`: 在组件卸载之前调用。
13. `onBeforeUnmount`: 在组件卸载之前调用,与 `beforeUnmount` 同时只会执行其中一个。
14. `unmounted`: 在组件卸载之后调用。
需要注意的是,在Vue3中,`beforeDestroy` 和 `destroyed` 钩子函数已经被移除了。取而代之的是 `beforeUnmount` 和 `unmounted` 钩子函数。
vue2生命周期执行顺序
Vue2的生命周期函数可以分为8个阶段,分别是:
1. beforeCreate:实例刚在内存中被创建出来,此时还没有初始化好 data 和 methods 属性。
2. created:实例已经在内存中创建完成,data 和 methods 已经创建完成,此时还没有开始编译模板。
3. beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中。
4. mounted:此时挂载已经完成,组件已经显示在页面中。
5. beforeUpdate:组件更新之前执行的钩子函数,此时虚拟 DOM 已经更新完成,但是页面还没有重新渲染。
6. updated:组件更新之后执行的钩子函数,此时页面已经完成了重新渲染。
7. beforeDestroy:组件销毁之前执行的钩子函数。
8. destroyed:组件销毁之后执行的钩子函数。
在父子组件的生命周期函数执行顺序方面,可以总结如下:
1. 父组件beforeCreate -> 父组件created -> 父组件beforeMount -> 子组件beforeCreate -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted
2. 子组件更新:父组件beforeUpdate -> 子组件beforeUpdate -> 子组件updated -> 父组件updated
3. 父组件销毁:父组件beforeDestroy -> 子组件beforeDestroy -> 子组件destroyed -> 父组件destroyed