vue常考的执行顺序技能题
时间: 2024-01-24 09:15:55 浏览: 80
在Vue中,常考的执行顺序技能题包括Vue实例的生命周期钩子函数的执行顺序以及父子组件的生命周期钩子函数的执行顺序。
1. Vue实例的生命周期钩子函数的执行顺序如下:
- beforeCreate:在实例初始化之后,数据观测和事件配置之前被调用。
- created:在实例创建完成后被立即调用。此时实例已完成以下配置:数据观测、属性和方法的运算、watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
- beforeMount:在挂载开始之前被调用。相关的render函数首次被调用。
- mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
- beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改数据,不会触发附加的重渲染过程。
- updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
2. 父子组件的生命周期钩子函数的执行顺序如下:
- 父组件beforeCreate
- 父组件created
- 子组件beforeMount
- 子组件mounted
- 父组件mounted
- 父组件beforeUpdate
- 子组件beforeUpdate
- 子组件updated
- 父组件updated
- 父组件beforeDestroy
- 子组件beforeDestroy
- 子组件destroyed
- 父组件destroyed
阅读全文