vue3.0的reactive和toRefs

<div id="main">
   <h1>{{count}}</h1>
  <button @click="increase">✋🏻+1</button> 
</div>

<script lang="ts">
import {ref,computed,reactive,toRefs} from "vue"
interface DataProps {
	count:number;
	double:number;
	increase:()=>void;
	
}
export default {
	//而在vue3中我们需要
	setup(){
		const data:DataProps = reactive({
			count:0,
			increase:()=>{data.count++}
			double:computed(()=>{data.count*2})
        })
        
        const countRefs = toRefs(data)
		return {
		 //注意：直接  data属性拿出来的时候不是响应式的而是普通的javascript类型失去了响应式的活性，只有变成ref响应式对象类型才可以动态改变，我们可以使用toRefs(data)
		    ...countRefs
		}
	}
}
</script>

复习下vue2的知识
vue2响应式使用的是
Object.defineproperty(obj, key, {get(){},set(){}}),
必须先知道key是什么
它无法检测对象的property的添加或删除，无法检测数组的变动
vue3使用的proxy()做响应式

new Proxy(data,{get(key){},set(key,value){}})
//可以拦截任意的key
//可以监听数组变化以及对象属性的添加或删除