老杜Vue2+3 (54，55) Vue的生命周期的四个阶段和八个钩子

最新推荐文章于 2024-05-21 20:04:34 发布

破车博特

最新推荐文章于 2024-05-21 20:04:34 发布

阅读量80

点赞数

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

本文链接：https://blog.csdn.net/MsXintu/article/details/132864794

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

本文章是通过学习b站老杜的Vue 2+3 视频，所记录的心得笔记

正文：

概述
Vue 实例对象的生命周期可以分为四个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都有相应的钩子函数可以用于在对应阶段执行特定的操作。

下面是 Vue 实例对象生命周期的四个阶段和八个钩子的解释：

创建阶段（Creation）
beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性尚不可用。

挂载阶段（Mounting）
beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

更新阶段（Updating）

beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成时会调用该钩子。

销毁阶段（Destruction）
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：实例销毁后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

通过使用这些生命周期钩子函数，可以在合适的阶段执行相应的操作，例如在创建阶段初始化数据、在挂载阶段与外部交互、在更新阶段响应数据的变化、在销毁阶段清理资源等。

初步测试案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="mydiv">
        <h1>{{msg}}</h1>
        <h3>计数器：{{count}}</h3><br>
        <button @click="countAdd()">添加</button>
    </div>
    
    <script>
        const vm =new Vue({
            el: '#mydiv',
            data:{
               msg:"Vue生命周期",
               count:0,
            },
            methods:{
                countAdd(){
                    this.count+=1
                }
            },
            beforeCreate(){
                console.log("beforeCreate")
            },
            created(){
                console.log("created")
            },

            beforeMount(){
                console.log("beforeMount")
            },
            mounted(){
                console.log("mounted")
            },
            beforeUpdate(){
                console.log("beforeUpdate")
            },
            updated(){
                console.log("updated")
            }

        })
    </script>
</body>
</html>