Vue——day11之生命周期

news2024/12/28 3:20:34

生命周期的八个阶段

生命周期执行的流程图

代码示例

总结

Vue的生命周期是指在Vue实例创建、挂载、更新和销毁过程中，会触发的一系列钩子函数。这些钩子函数可以用来在不同的生命周期阶段执行相应的逻辑操作。

生命周期的八个阶段

Vue的生命周期可以分为8个阶段，分别是：

创建阶段：
- beforeCreate：在实例初始化之后，数据观测（data observer）和事件配置（event watcher）之前被调用。此时data和methods还未初始化。
- created：在实例创建完成后被调用。此时data和methods已经初始化，但DOM还未渲染。
挂载阶段：
- beforeMount：在挂载开始之前被调用。此时DOM还未渲染。
- mounted：在挂载完成后被调用。此时DOM已经渲染，可以进行DOM操作和异步请求。
更新阶段：
- beforeUpdate：在数据更新之前被调用。此时组件已经重新渲染，但是还未应用更新的数据。
- updated：在数据更新之后被调用。此时组件已经重新渲染，并且更新了数据。
销毁阶段：
- beforeDestroy：在实例销毁之前被调用。此时实例还可用，可以进行清理工作。
- destroyed：在实例销毁之后被调用。此时实例已经被销毁，所有监听器和子实例都已解绑。

在生命周期函数中，可以进行一些特定的操作，例如获取数据、进行异步请求、监听事件、DOM操作等。这些函数的执行顺序是固定的，可以根据需要在不同的生命周期函数中编写相应的代码逻辑。

生命周期执行的流程图

下图是我在Vue官网中找到了整个生命周期执行的流程图

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>


    <div id="root">
        <h2 :style="{opacity: opacity}">欢迎业主回家!!!</h2>
        <button @click="opacity = 1">拉满透明度</button>
        <button @click="stop()">点击停止变换</button>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false



    const vm = new Vue({
        el:'#root',
        data:{
            opacity:1 
        },
        methods: {
            stop(){
                this.$destroy()
            }
        },
        
        // Vue完成模版的解析并把真实的DOM元素放入页面后调用
        mounted(){
            this.timer = setInterval(()=>{
                this.opacity -= 0.01
                if(this.opacity <= 0){
                    this.opacity = 1
                }
            },16)
        },
        beforeDestroy() {
            // 由于停止了vm之后定时器依然没有被删除，所以这里来了解它
            clearInterval(this.timer)
            
        },
    });


</script>
</html>

总结

生命周期:

又名: 生命周期回调函数、生命周期函数、生命周期钩子。
是什么: Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

常用的生命周期钩子有两个：

mounted：在组件挂载完成后被调用，可以进行一些初始化操作，比如发送ajax请求、启动定时器、绑定自定义事件、订阅消息等。
beforeDestroy：在组件销毁之前被调用，可以进行一些收尾工作，比如清除定时器、解绑自定义事件、取消订阅消息等。在这个阶段，可以做一些清理工作，但一般不会在这里操作数据，因为即便操作数据，也不会再触发更新流程了。

关于销毁Vue实例，有以下几点注意事项：