超详细的vue生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73490373/article/details/130995977

文章详细阐述了Vue组件从beforeCreate到destroyed的生命周期过程，强调了每个阶段的特点和对DOM操作的影响。在beforeMount阶段，对DOM的操作无效，而在mounted阶段后的DOM操作才有效。文章还通过示例代码演示了生命周期钩子的功能，包括数据变化、DOM更新和组件销毁等关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习vue的生命周期对开发人员来说有非常大的帮助，他使开发人员可以更清楚地认识vue的工作流程。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

下方图片中红色框即是vue的生命周期

VUE生命周期图

1）beforeCreate:

此时无法通过vm访问到data中的数据，methods中的方法。

控制台输出结果：

2)created

beforeCreate之后开始了初始化，此时开始了数据检测和数据代理。

该阶段(created)可以通过vm访问到data中的数据，methods中的配置方法。该阶段data数据发生了改变，因为可以访问到data的数据。但是n实际的值依旧没有在页面中展现出来。

此处穿插一个小的知识点：

上面阶段进行完之后，进入下面流程

在此流程中会生成虚拟DOM，接收到了数据，但是还没有的及向页面中传输数据，我们可以通过在下一周期即beforeMount中设置断点进行验证。

3)beforeMount

页面呈现的是未经Vue编译的DOM结构，并且所有对DOM的操作，最终都不奏效。

如上图n的值还没有显示出来。

那为什么说在这一阶段所有对DOM的操作，最终都不奏效呢？接下来我们进行讲解并且验证一下：

在beforeMount和mounted中间有个流程为：

上图的粉色框主要是将内存中的虚拟DOM转为真实DOM插入页面，也就是说在该处直接将下图中产生的虚拟DOM拿出来使用，转换为真实DOM，因此此时在beforeMount中对数据进行操作没有任何意义，因为beforeMount之后使用的还是以前产生的虚拟DOM，直接将虚拟DOM转换成真实DOM的。

接下来验证一下：

n的初始值为1.我们在beforeMount中设置一个断点.为了让大家更清晰的看到结果，我将在控制台对DOM进行操作。

1.设置断点

2.查看当前页面：

3.我们在控制台中对DOM进行操作，将字体颜色更改为红色的：

此时页面效果：

效果的确如我们所想的那样显示出来了，但是请注意此时我将让程序继续运行，

可以看出刚才设置的颜色没有了，这就证明了我们刚才在beforeMount中对DOM的操作并没有奏效。

4）Mounted
页面中呈现的是经过Vue编译的DOM,对DOM的操作均有效(尽可能避免)。

验证：

代码：

遇到断点时：

此时可以看到页面中{{n}}的值已经被解析了，我们同样在控制台将其设置为红色字体，看看对DOM的操作是否奏效：

接下来我们继续运行，页面展示效果如下图：

由此可见，我们在Mounted中进行的DOM操作最终是奏效了的。但是我们还是尽量避免此类操作

5） beforeUpdate

在页面更新时会触发，此时数据是新的，页面是旧的，页面和数据并未同步

验证：

代码：

然后我们点击页面中的n自增的按钮，会进入此阶段，在控制台中输入 this.n查看n值是否改变：

n值已经改变，但是此时页面中n值依旧没有改变，如下图：

这就是因为在这一阶段，数据是新的，但是页面是旧的，页面和数据并未同步。

6)updated

在这一阶段，数据和页面都是新的，即：页面和数据保持同步。

7）beforeDestroy

在这一阶段data,methods，指令等都处于可用状态，马上执行销毁过程。一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等。

在此阶段执行的数据更改操作不会

destroy方法

首先我们先调用destroy(),如：设置一个按钮，给按钮绑定一个事件，这时只要点击按钮就会进入自动销毁流程，

在点击销毁按钮之前，自增按钮还可以使用。

当点击销毁按钮后，我们再点击自增按钮就没有用处了，进入销毁流程，

控制台输出如下：

我们在执行 beforeDestroy阶段时，在此阶段所有对数据的操作都不会生效，比如：

此时点击销毁按钮，进入beforeDestroy阶段后，会发现页面并没有执行n=99这一操作，页面中n的值没有发生改变。

8）destroyed()

此阶段是vue生命周期的最后一个阶段。

整个代码分享：

html:

<body>
    <!--  -->
<div id="root">
    <h1>当前的值是：{{n}} </h1>
    <button @click="add">点我自增</button>
    <button @click="bye">点我销毁</button>
</div>
</body>

</html>

js:

 const v=new Vue({
    el:"#root",
    data: {
        n:1
     },
     methods: {
        add(){
            this.n++
        },
        bye(){
         console.log('进入销毁流程')
            this.$destroy()
        }
     },
     beforeCreate() {
        console.log('beforeCreate')
        // console.log(this)
        // debugger;//断点
     },
     created() {
        console.log("created")
        // debugger;//断点/
     },
     beforeMount() {
        console.log("beforeMount")
        // debugger;//断点/
     },
     mounted(){
        console.log("Mount")
        // debugger;

     },
     beforeUpdate(){
          console.log('beforeUpdate')
         //  debugger;
     },
     beforeDestroy(){
           console.log('beroreDestroy')
           this.n=99;
           debugger;
     },
     destroyed() {
      //   console.log("destroy")
        // debugger;
     },
    })

以上就是vue生命周期的一个简单分析。