一、什么是生命周期
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
二、生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
生命周期函数=生命周期事件=生命周期钩子
三、vue生命周期
<script>
import {defineComponent} from 'vue'
export default defineComponent({
name: "lifeViews",
data: {
star:true,
},
methods: {
},
// 初始化之前,data和methods中的数据还没有初始化,获取不到
// 作用:页面重定向
beforeCreate() {
console.log(this)
},
// 初始化之后,data和methods中的数据已经初始化,第一个可以操作data和methods中的数据的生命周期。
// 数据初始化,接口请求
created() {
console.log('created')
},
// 虚拟DOM挂载
beforeMount() {
console.log('beforeMount')
},
//真实DOM挂载,此时组件已经创建完成
// 第一个可以操作DOM元素的生命周期
mounted() {
console.log('mounted')
},
// 更新之前 页面中的数据是旧的,data里面的数据是新的,数据和页面尚未保持同步。
//(可以执行0和无数次)
beforeUpdate() {
console.log('beforeUpdate')
},
// 更新之后 页面和data里面的数据都是新的且保持同步。
// (可以执行0和无数次)
updated() {
console.log('updated')
},
// 销毁之前 作用:清空定时器,页面监听
beforeDestroy() {
console.log('beforeDestroy')
},
// 销毁之后
destroyed() {
console.log('destroyed')
}
})
</script>