Vue生命周期_Vue生命周期钩子

一、生命周期介绍

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。

在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

二、常用生命周期事件

onCreated

组件创建时候触发执行。

onMounted

注册一个回调函数，在组件挂载完成后执行。

使用案例：

<template>
    <h1 v-for="item in array">测试{{item}}</h1>
</template>


<script>
export default {
    data(){
        return{
            array:[1,2,3]
        }
    },
    created:function(){
        //可以用来加载数据
        console.info('组件创建时候触发');
    },
    mounted:function(){
        //可以用来二次渲染页面
        console.info('组件渲染结束触发');
    }
}
</script>

setup 风格：

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

三、生命周期演示图

更多：

Vue 概念、历史、发展和Vue简介-CSDN博客

Vue3.4+element-plus2.5 + Vite 搭建教程整理_vue 3.4 element-CSDN博客

Vite 下一代的前端工具链，前端开发与构建工具_vite5为什么叫工具链-CSDN博客