VUE3组合api的钩子函数生命周期

Posted 2021-09-10 月疯

选项API生命周期选项和Composition API之间的映射
beforeCreate------>使用setup()
created------>使用setup（）
beforeMount--------->onBeforeMount
mounted-------->onMounted
beforeUpdate------------>onBeforeUpdate
updated---------->onUpdated
beforeUnmout----------->onBeforeUnmount
unmounted---------->onUnmounted

这些生命周期钩子函数只能在setup()函数中使用

<template>
	<div>
		<p>{{count}}</p>
		<button @click="change">修改</button>
	</div>
</template>

<script>
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default{
		setup(){
			console.log('setup')
			onBeforeMount(() =>{
				console.log('onBeforeMount')
			})
			onMounted(()=>{
				console.log('onMounted')
			})
			onBeforeUpdate(()=>{
			    console.log('onBeforeUpdate')
			})
			onUpdated(()=>{
				console.log('onUpdated')
			})
			onBeforeUnmount(()=>{
				console.log('onBeforeUnmount')
			})
			onUnmounted(()=>{
				console.log('onUnmounted')
			})
			
			const count=ref(1)
			const change=()=>{
				count.value=6
			}
			return{
				count,
				change
			}
		}
	}
</script>

<style>
</style>