当前位置：首页 > news >正文

vue组件的生命周期

news 来源：原创 2024/9/24 13:23:24

一、组件运行的过程

开始--》import导入组件--》components注册组件--》以标签形式使用组件--》在内存中创建组建的实例对象--》把创建的组件实例渲染到页面上--》组件切换时销毁需要被隐藏的组件--》结束

组件的生命周期指的是：组件从创建、运行（渲染）、销毁的整个过程，强调的是一个时间段。

二、监听组件的不同时刻

vue框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。

1.当组件在内存中被创建完毕后，会自动调用created函数

2.当组件被成功渲染到页面上之后，会自动调用mounted函数

3.当组件被销毁完毕后，会自动调用unmounted函数

三、监听组件的更新

当组件的data数据更新后，vue会自动重新渲染组件的dom结构，从而保证view视图展示的数据和model数据源保持一致。

当组件被重新渲染完毕后，会自动调用updated生命周期函数。

四、组件中主要的生命周期函数

生命周期函数	执行时机	所属阶段	执行次数	应用场景
created	组件在内存中创建完毕后	创建阶段	唯一1次	发ajax请求初始数据
mounted	组件初次在页面中渲染完毕后	创建阶段	唯一1次	操作dom元素
updated	组件在页面中被重新渲染完毕后	运行阶段	0或多次	-
unmounted	组件被销毁后（页面和内存）	销毁阶段	唯一1次	-

在实际开发中，created是最常用的生命周期函数。

五、完整的生命周期函数

生命周期函数	执行时机	所属阶段	执行次数	应用场景
beforeCreate	在内存中开始创建组件之前	创建阶段	唯一1次	-
created	组件在内存中创建完毕后	创建阶段	唯一1次	发ajax请求初始数据
beforeMount	在把组件初次渲染到页面之前	创建阶段	唯一1次	-
mounted	组件初次在页面中渲染完毕后	创建阶段	唯一1次	操作dom元素
beforeUpdate	在组件被重新渲染之前	运行阶段	0或多次	-
updated	组件在页面中被重新渲染完毕后	运行阶段	0或多次	-
beforeUnmount	在组件被销毁之前	销毁阶段	唯一1次	-
unmounted	组件被销毁后（页面和内存）	销毁阶段	唯一1次	-

为什么不在beforeCreate中发ajax请求初始数据？

在beforeCreate中，无法访问到data里面数据，请求到的数据无法挂载到da'ta中供组件渲染使用

操作dom在mounted函数中

<template>{{ count }}<button @click="count+=1">按钮</button>
</template>
<script>
export default {data(){return{count:1}},beforeCreate(){console.log('beforeCreate,在内存中开始创建组件之前',this.count);},created(){console.log('created,组件在内存中被创建了',this.count);},beforeMount(){console.log('beforeMount,在把组件初次渲染到页面之前');},mounted(){console.log('mounted,组件第一次被渲染到页面上了');},beforeUpdate(){console.log('beforeUpdate,在组件被重新渲染之前');},updated(){console.log('updated,组件被重新渲染完毕了');},beforeUmounte(){console.log('beforeUmounte,组件被销毁之前');},unmounted(){console.log('unmounted,组件被销毁完毕了');}
}
</script>