vue组件的生命周期详细到胃

星月前端

已于 2022-11-21 13:39:43 修改

阅读量1.2k

点赞数 8

分类专栏： vue 笔记文章标签： vue.js

于 2022-08-17 18:16:37 首次发布

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

版权

笔记同时被 2 个专栏收录

110 篇文章 2 订阅

订阅专栏

vue

44 篇文章 0 订阅

订阅专栏

组件的生命周期

前言

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