vue3在<script setup>中使用...toRefs(两种写法)
vue3
·
使用<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 吧
更多推荐
已为社区贡献2条内容
所有评论(0)