【vue2第七章】vue的四个生命周期与八个钩子函数

vue的四个生命周期与八个钩子函数

Vue的四个生命周期有：创建（creation）、挂载（mounting）、更新（updating）和销毁（destroying）。

钩子函数是什么：
vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子函数，让开发者可以在特定的周期调用自己的代码。

创建生命周期：Vue实例被创建时，会执行一些初始化的工作，例如数据的观测、事件的回调等。此生命周期中的钩子函数有：

钩子函数名	触发事件
beforeCreate	在实例创建之前调用，此时尚未初始化data和methods。
created	在实例创建之后调用，此时已经完成了data和methods的初始化。

挂载生命周期：挂载是将Vue实例与DOM关联的过程，即将Vue实例的模板渲染成最终的HTML，并且插入到页面中。此生命周期中的钩子函数有：

钩子函数名	触发事件
beforeMount	在挂载开始之前调用，此时尚未生成对应的DOM节点。
mounted	在挂载完成之后调用，此时已经生成对应的DOM节点。

更新生命周期：当Vue实例的数据发生改变时，会触发更新生命周期。在此生命周期中，Vue会重新渲染并更新DOM。此生命周期中的钩子函数有：

钩子函数名	触发事件
beforeUpdate	在更新开始之前调用，此时尚未重新渲染和更新DOM。
updated	在更新完成之后调用，此时已经重新渲染和更新DOM。

销毁生命周期：当Vue实例被销毁时，会执行一些清理工作，例如取消事件订阅、解绑DOM等。此生命周期中的钩子函数有：

钩子函数名	触发事件
beforeDestroy	在销毁开始之前调用，此时Vue实例仍然完全可用。
destroyed	在销毁完成之后调用，此时Vue实例已经被销毁，无法再访问其属性和方法。

流程图展示：
在这里插入图片描述
代码演示:

<body>
    <div id="box">
        <button @click="num--">-</button>
        <div id="num" style="display: inline-block;">{{ num }}</div>
        <button @click="num++">+</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    const app = new Vue({
        el:"#box",
        data:{
            num:0
        },
        beforeCreate(){
            console.log("beforeCreate时的num数据",num)
        },
        created(){
            console.log("created时的num数据",num)
        },
        beforeMount(){
            console.log("beforeMount时的num的dom",document.getElementById("num").innerHTML)
        },
        mounted(){
            console.log("mounted时的num的dom",document.getElementById("num").innerHTML)
        },
        beforeUpdate(){
            console.log("beforeUpdate时的num的dom",document.getElementById("num").innerHTML)
        },
        updated(){
            console.log("updated时的num的dom",document.getElementById("num").innerHTML)
        },
        beforeDestroy(){
            //销毁时主要处理一些清楚定时器，定时任务什么打，减缓浏览器压力
        },
        destroyed(){

        }
    })    
    </script>
</body>

代码效果展示：
在这里插入图片描述
可以看到再beforecreated时数据时undefined
在create的时候数据就初始化好了，
在beforemount时 num还是字符串没有被渲染好
在mount时， num就已经渲染好了
在我点击按钮时，beforeUpdate时 dom还是0
当页面更新完之后，Update时就是1