西安优化网站公司网站制作

一、生命周期介绍

每个 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博客