【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>

相关推荐
会联营的陆逊20 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over69720 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx21 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森21 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy
疏狂难除21 小时前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟21 小时前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_921 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖1 天前
Webpack系列-Loader
前端·webpack
aggression1 天前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo1 天前
深入理解与实战 Git Submodule
前端