Loading... ## 组件的生命周期 | 时刻 | 调用特定的函数 | | ---- | -------------- | | 创建 | created() | | 挂载 | mounted() | | 更新 | ... | | 销毁 | ... | 生命周期、函数、钩子都是一个意思. ## 函数 | 时刻 | 函数 | | ---- | ----------------------------------- | | 创建 | setup（直接在主函数里书写即可） | | 挂载 | 前：onBeforeMount 后：onMounted | | 更新 | 前：onBeforeUpdate 后：onUpdated | | 卸载 | 前：onBeforeUnmount 后：onUnmounted | ```vue <template> <div class="person"> <ul> <h2>当前求和为{{ sum }}</h2> <button @click="add">点击+1</button> </ul> </div> </template> <script lang="ts" setup name="test"> import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue'; let sum =ref(0) function add(){ sum.value+=1 } //创建 console.log('创建') onBeforeMount(()=>{ console.log('挂载前') }) onMounted(()=>{ console.log('挂载完毕') }) onBeforeUpdate(()=>{ console.log('更新前') }) onUpdated(()=>{ console.log('更新完毕') }) onBeforeUnmount(()=>{ console.log('卸载前') }) onUnmounted(()=>{ console.log('卸载完毕') }) </script> <style> </style> ```  注：Vue是自下而上的。先引入子再引入父 最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 1 不用打赏哦！