vue3在＜script setup＞中使用...toRefs(两种写法)

使用<script>的写法：

export default {
	......
	setup(){
		const state = reactive({
		    c: 0,
   			d: 1,
		});
		
		return {
		    ...toRefs(state),
		};
	}
}

使用<script setup>后的写法：

<el-button @click="state.c++;c++">模板按钮</el-button>
{{state.c}} ， {{state.d}} ， {{c}} ， {{d}}

<script setup>
	import { getCurrentInstance, ref, watch, reactive, toRefs} from 'vue'
	const state = {...toRefs(reactive({
	    c: 0,
	    d: 1,
	 }))}
	 const { c, d } = toRefs(state2)
</script>

显示：
0 ， 1 ， 0 ， 1
点击按钮后：
NaN ， 1 ， 1 ， 1

原因：state.c 要改成 state.c.value
也就是说
state.c.value === state2.c 为 true

---

结论：
如果一定要用<script setup>，还是 const { c, d } = toRefs(state2) 这种写法好用，虽然写起来麻烦一点
变量太多的时候，是用<script> + return 吧