vue的生命周期

一、什么是生命周期

从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>