vue组件的生命周期详细到胃_export default 生命周期-CSDN博客

本文链接：https://blog.csdn.net/qq_61950936/article/details/126391722

本文详细介绍了Vue组件的生命周期过程，包括created、mounted、updated和unmounted等关键阶段，并演示了如何在不同阶段进行操作。阅读本文，掌握组件完整生命周期管理技巧。

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

组件的生命周期

前言

这篇文章介绍vue组件组件的生命周期！详细到牙齿，看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！

1. 组件运行的过程

在这里插入图片描述

组件的生命周期指的是：组件从创建、运行（渲染）、销毁的整个过程，强调的是一个时间段。

2. 如何监听组件的不同时刻

在这里插入图片描述

vue 框架为组件内置了不同时刻的生命周期函数，生命周期函数会伴随着组件的运行而自动调用。例如：

① 当组件在内存中被创建完毕之后，会自动调用 created 函数；

② 当组件被成功的渲染到页面上之后，会自动调用 mounted 函数；

③ 当组件被销毁完毕之后，会自动调用 unmounted 函数；

组件中代码如下，这样在父组件上使用这个子组件的时候就会调用这三个生命周期函数了。

<template>
  <h2>life组件</h2>
</template>

<script>
export default {
  name:'life',
  created(){
    console.log('组件创建了')
  },
  mounted() {
    console.log('组件渲染到页面上了')
  },
  unmounted() {
    console.log('组件被销毁了')
  },
}
</script>

3. 如何监听组件的更新

当组件的 data 数据更新之后，vue 会自动重新渲染组件的 DOM 结构，从而保证 View 视图展示的数据和Model 数据源保持一致。

当组件被重新渲染完毕之后，会自动调用 updated 生命周期函数。

<template>
  <h2>life组件--{{ count }}</h2>
<button @click="count += 1">+1</button>
</template>

<script>
export default {
  name:'life',
    data(){
        return{
            count:0
        }
    }
  updated() {
    console.log('组件重新渲染完毕了')
  },
}
</script>

当点击+1 时候，count加1，数据自动渲染到页面，然后每次渲染完毕会调用 updated 函数。