vue的钩子函数和生命周期详解（vue的生命周期及8个钩子函数）

科技前沿 • 2025-04-15 15:40 • 阅读 44

大家好，我是讯享网，很高兴认识大家。

 <p>vue的生命周期、生命周期函数&#xff0c;又叫钩子函数  <strong> </strong></p>

讯享网

生命周期钩子===生命周期函数===生命周期事件

一、Vue生命周期

1、vue实例从创建到销毁的过程

2、vue生命周期有4个阶段

3、父子组件执行顺序

二、钩子函数

1、钩子函数三个阶段

2、vue第一次加载页面会执行哪几个钩子

3、vue中常用的钩子

三、代码实现

1、代码案例

2、执行结果

3、分析总结

讯享网

1、vue实例从创建到销毁的过程

2、vue生命周期有4个阶段

阶段一：创建（创建vue实例）
阶段二：挂载（data数据渲染到el上）
阶段三：更新（检测data变化并更新el）
阶段四: 销毁（解除data与el的绑定关系）

3、父子组件执行顺序

        挂载：父created -> 子created -> 子mounted> 父mounted
        更新：父beforeUpdate -> 子beforeUpdated -> 子updated -> 父updated
        销毁：父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

1、钩子函数三个阶段

挂载阶段：beforeCreate、created、beforeMounted、mounted
更新阶段：beforeUpdate、updated
销毁阶段：beforeDestroy、destroyed

1、beforeCreate ：创建vue实例前。这个钩子就是 data中的数据还没有创建，拿不到数据
2、created：vue实例创建完成。这个钩子就是data / methods / computed中的数据已经创建了，可以访问到数据
3、beforeMount ： data数据还没有渲染el或者$montd上面。这个钩子就是el或着$montd已经完成了创建，但是还没有进行渲染到页面
4、mounted ：完成挂载，data中的数据渲染到页面上。这个钩子就是已经完成了渲染
5、beforeUpdate：数据更新前（检测数据发生了变化，但是真是DOM元素页面还没有更新）
6、updated：完成数据的更新（把data中修改后的数据渲染到DOM页面上）
7、beforeDestroy：vue实例销毁前，这个钩子就是解除了data和el的绑定关系
应用场景：一般用来清除定时器/全局事件
8、destroyed 完成销毁

2、vue第一次加载页面会执行哪几个钩子

1、创建vue的实例之前：beforeCreate

2、创建vue实例后：created

3、挂载前：beforemount

4、挂载后（初始的渲染，将data中的数据渲染到el上）：mounted

3、vue中常用的钩子

1、created：完成data数据创建（一般用于发送axios的请求）

2、mounted：完成了初始的渲染，data中的数据渲染到el上，但没有加载到页面上

1、代码案例

讯享网

2、执行结果

3、分析总结

vue实例创建前：输出的都显示的没有定义
vue实例创建后：实例创建后，可以操作数据
DOM挂载前：第三个数据时虚拟DOM
DOM挂载前：第三个数据时真实的DOM

vue的钩子函数和生命周期详解（vue的生命周期及8个钩子函数）

1、vue实例从创建到销毁的过程

2、vue生命周期有4个阶段

3、父子组件执行顺序

1、钩子函数三个阶段

2、vue第一次加载页面会执行哪几个钩子

3、vue中常用的钩子

1、代码案例

2、执行结果

3、分析总结

相关推荐