在项目中我使用到vue3，但是开始的时候就遇到了一个双向数据绑定不生效的问题，我在网上看了一些文档，说把数据使用ref 和reactive 声明可以实现双向数据绑定。

强调文本 强调文本

加粗文本 加粗文本

标记文本

但是我发现使用ref绑定的数据确实是可以实时响应，但是当我数据量多的时候，我把数据放到 reactive 中声明，使用ES6中的扩展运算符来对其进行解构处理，但是，这样吧解构之后，便不再具有响应式的属性。
下面是我错误的代码示范。

<script>
    import {ref, reactive} from 'vue'

    export default {
        name: "Login",
        components: {ResetPwd, BaseDialog},
        setup(props, ctx) {
            const state = reactive({
                Num: 0,
            })  
            const num2 = ref(2)
            const switchNum = ()=>{ // 点击切换
              state.Num = 11
              num2.value = 13
            }

            return {
                ...state, 
                num2,
                switchNum
            }
        }
        
    }
</script>

所以vue考虑到这个问题，又给我们添加了一个标签 toRefs ,当他和 reactive 组合使用时，就可以实现双向数据的绑定。

<script>
    import {ref, reactive} from 'vue'

    export default {
        name: "Login",
        components: {ResetPwd, BaseDialog，toRefs},
        setup(props, ctx) {
            const state = reactive({
                Num: 0,
            })  
            const num2 = ref(2)
            const switchNum = ()=>{ // 点击切换
              state.Num = 11
              num2.value = 13
            }

            return {
                ...toRefs(state), //使用toRefs 包裹需要双向绑定的数据即可。 
                //确保使用扩展运算符进行解构之后，仍具有响应式
                num2,
                switchNum
            }
        }        
    }
</script>

最后还是希望提一个自己的想法，不要把所有的数据都是要toRefs包裹，这样的话所有的数据都计算，反而会影响我们的性能，这样就vue3的理念相悖了。
大家可以做实际项目开发中只把必要的数据使用toRefs包裹，而其他不需要实时响应的数据不包裹，从根本上减少计算量。