vue3(1)学习

vue3 学习(1)

reactivecomputed onmounted toRefs onUnmounted watch toRefs ref

<template>
	<div>{{ counter }}</div>
	<div>{{ doublecounter }}</div>
	<p ref="desc"></p>
</template>
import { defineComponent, reactive, toRefs, computed , onMounted ,watch,onUnmounted} from "vue";
import {useRouter} from 'vue-router'
export default defineComponent({
	setup(){
		const state=reactive({
			counter:1
			doublecounter:computed(()=>state.counter*2)
		})
		let timer
		//定时器
		onMounted(()=>{
			timer=setInterval(()=>{
				state.counter++
			},1000)
		})
		//移除定时器
		onUnmounted(()=>{
			clearInterval(timer)
		})
		
		const desc = ref(null)
		//监听器
		watch(state.counter,(val,oldval)=>{
			//p就是desc这个元素
			let p=desc.value
			p.textContent=`counter change from ${oldval} to ${val}`
		})
	return{...toRefs}
	}
})