Vue生命周期钩子函数（详细整理）

xunfengZ

于 2020-11-14 11:16:12 发布

阅读量266

点赞数 1

分类专栏： vue 文章标签： vue javascript vue.js

本文链接：https://blog.youkuaiyun.com/xunfengZ/article/details/109687874

版权

本文深入探讨Vue组件的生命周期，通过图解和表格形式详细梳理了各个钩子函数的执行顺序和应用场景，帮助开发者更好地理解和利用Vue的生命周期进行状态管理和功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图解版：

钩子函数	特征	应用场景
beforeCreadted	（Vue刚出生）vue实例的挂载元素$el、数据对象data以及methods都没有初始化	加loading事件
created	vue实例的数据对象data和methods初始化完成，但$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了（模板编译好了，但没有渲染），但还是虚拟的dom节点，具体的data.filter还未替换。	…
mounted	vue实例挂载完成（模板渲染到了页面），data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发，但是页面上的数据没有更新	…