使用<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 吧

Logo

前往低代码交流专区

更多推荐