组件的生命周期

星月 8/18/2022 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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

在这里插入图片描述

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

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

全部的生命周期函数：

在这里插入图片描述

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

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

# 6. 完整的生命周期图示

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

星月前端博客

Choose mode