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

最新推荐文章于 2024-05-20 10:06:54 发布

一个大不溜w

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量636

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_72979483/article/details/132591267

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述
当我在浏览器控制台使用 app.$destroy()就会销毁vue实列，触发 beforeDestroy 和 destroyed ，
并且页面刚刚所写的任何功能都不能用了，因为我们已经把vue实列销毁了.

一个大不溜w

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【vue2第七章】vue的四个生命周期与八个钩子函数

vue的四个生命周期与八个钩子函数**Vue的四个生命周期有：创建（creation）、挂载（mounting）、更新（updating）和销毁（destroying）。****钩子函数是什么：vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子函数，让开发者可以在特定的周期调用自己的代码。**
复制链接

扫一扫