在 Vue 组件的生命周期中
时间: 2024-05-25 20:09:55 浏览: 165
Vue 组件有多个生命周期钩子函数,每个钩子函数在组件生命周期的不同阶段触发,常见的生命周期钩子函数包括:
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 重新渲染和打补丁之后调用该钩子函数。调用时,组件 DOM 已经更新,所以可以执行依赖于 DOM 的操作。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁之后调用。此时,所有的子组件以及事件监听器都已被移除。
这些钩子函数可以让我们在不同的组件生命周期阶段进行自定义操作,方便开发和调试组件。
阅读全文