组件的生命周期

前言

这篇文章介绍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 函数。

4. 组件中主要的生命周期函数

注意：在实际开发中，created 是最常用的生命周期函

5. 组件中全部的生命周期函数

全部的生命周期函数：

疑问：为什么不在 beforeCreate 中发 ajax 请求初始数据？

在这个阶段无法请求data里面的数据，没法让组件去挂载和使用，只能在下一个阶段的 created 中发起 ajax 请求。

6. 完整的生命周期图示

可以参考 vue 官方文档给出的“生命周期图示”，https://www.vue3js.cn/docs/zh/guide/instance.html#生命周期图示，进一步理解组件生命周期执行的过程：

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！