vue2交互生命周期执行顺序
时间: 2023-10-09 15:10:50 浏览: 53
Vue2 的组件生命周期钩子函数执行顺序如下:
1. beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created:实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前尚不可用。
3. beforeMount:在挂载开始之前被调用:相关的 render 函数首次被调用。
4. mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用该钩子。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁后调用。此时,所有的指令已被解绑,所有的事件监听器已被移除。
相关问题
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
vue 父子组件生命周期执行顺序
在Vue中,父子组件的生命周期钩子函数的执行顺序如下:
1. 父组件:
- beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created:在实例创建完成后被立即调用。在这一步,实例已完成以下配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
- beforeMount:在挂载开始之前被调用。相关的 render 函数首次被调用。
- mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
- beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对数据进行修改。
- updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。此时,Vue 实例的所有指令都已解绑,所有事件监听器都已移除。
2. 子组件:
- beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 这些生命周期钩子函数的执行顺序与父组件相同。