【Vue】生命周期函数

系列文章目录

第五章 生命周期函数


文章目录


生命周期函数代表的是Vue实例,或者是Vue组件,在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、挂载阶段、更新阶段以及卸载阶段。

  • 创建阶段:setup
  • 挂载阶段:onBeforeMount、onMounted
  • 更新阶段:onBeforeUpdate、onUpdated
  • 卸载阶段:onBeforeUnmount、onUnmounted
html 复制代码
<template>
    <h2>count为:{{ count }}</h2>
    <button @click="onUpdateCount">更新count</button>
</template>

<script setup>
import {
    ref,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
} from 'vue'

// 数据
let count = ref(0)
// 方法
function onUpdateCount() {
    count.value += 1
}
console.log('setup')
// 生命周期钩子
onBeforeMount(() => {
    console.log('挂载之前')
})
onMounted(() => {
    console.log('挂载完毕')
})
onBeforeUpdate(() => {
    console.log('更新之前')
})
onUpdated(() => {
    console.log('更新完毕')
})
onBeforeUnmount(() => {
    console.log('卸载之前')
})
onUnmounted(() => {
    console.log('卸载完毕')
})
</script>

相关推荐
Mintopia2 分钟前
向量在图形变化中的应用教学
前端·javascript·计算机图形学
Mintopia3 分钟前
Three.js 物体碰撞试验学习指南
前端·javascript·three.js
编码七号14 分钟前
【axios取消请求】如何在token过期后取消未响应的请求
java·前端·javascript
张开心_kx15 分钟前
面试官又问我是否了解React的单向数据流
前端·javascript·react.js
Web漫游17 分钟前
🔥2025年了你还不会使用Vue3?
javascript·vue.js
残轩18 分钟前
Win10 家庭版 Docker 环境搭建详解(基于 WSL2)
前端·后端·docker
palpitation9720 分钟前
Flutter分解布局选择辅助方法还是Widget?
前端
工呈士20 分钟前
HTML响应式网页设计与跨平台适配
前端·html
作曲家种太阳21 分钟前
第六章节 响应式的 computed 实现【手摸手带你实现一个vue3】
前端
腊月廿二23 分钟前
跨项目频繁切换node版本号(nvm-windows)
前端