<template>
<div>
{{msg}}
<button @click="changeMsg">更新数据</button>
</div>
</template>
<script lang="ts">
import {defineComponent, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue';
export default defineComponent({
setup () {
let msg = ref('test')
function changeMsg () {
msg.value += '~'
}
onBeforeMount (() => {
console.log('onBeforeMount')
})
onMounted (() => {
console.log('onMounted')
})
onBeforeUpdate (() => {
console.log('onBeforeUpdate')
})
onUpdated (() => {
console.log('onUpdated')
})
onBeforeUnmount (() => {
console.log('onBeforeUnmount')
})
onUnmounted (() => {
console.log('onUnmounted')
})
return {
msg,
changeMsg,
}
}
})
</script>
<style scoped>
</style>
vue3的生命周期
最新推荐文章于 2024-07-30 23:19:55 发布