【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实例已经被销毁,无法再访问其属性和方法。

流程图展示:
【vue2第七章】vue的四个生命周期与八个钩子函数_第1张图片
代码演示:

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

代码效果展示:
【vue2第七章】vue的四个生命周期与八个钩子函数_第2张图片
可以看到再beforecreated时 数据时undefined
在create的时候数据就初始化好了,
在beforemount时 num还是字符串没有被渲染好
在mount时, num就已经渲染好了
在我点击按钮时,beforeUpdate时 dom还是0
当页面更新完之后,Update时 就是1

【vue2第七章】vue的四个生命周期与八个钩子函数_第3张图片
当我在浏览器控制台使用 app.$destroy()就会销毁vue实列,触发 beforeDestroy 和 destroyed ,
并且页面刚刚所写的任何功能都不能用了,因为我们已经把vue实列销毁了.

你可能感兴趣的:(vue,vue.js,javascript,前端)