一、生命周期介绍
每个 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博客