ref,toRefs,reactive的用法

ref 的用法：

<template>
    <div>
        <div @click="name='李四'">{{name}}</div>
        <div @click="age=21">{{age}}</div>
    </div>
</template>
<script>
import { ref } from 'vue';
export default {
    name:'Page2',
    setup(){
        let name = "张三";
        let age = ref(20);
        return{
            name,age
        }
    }
}
</script>

点击显示 age 的 div，网页上的元素会同步更新 age 的值为 21，点击显示 name 的 div，网页显示的 name 值不会同步变化，因为加了 ref 的值是响应式的，不加的是普通 String，不会同步更新。

reactive 的用法：
现在你想把 name 也变成响应式的变量，可以照着 age 写一个 let name = ref(“张三”)，但是你觉得每个变量都写个 ref 不好，怎样写到一起？

<template>
    <div>
        <div @click="state.name='李四'">{{state.name}}</div>
        <div @click="state.age=21">{{state.age}}</div>
    </div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
    name:'Page2',
    setup(){
        const state = reactive({
            name:"张三",
            age:20
        })
        return{
            state
        }
    }
}
</script>

很好，两个 div 点击后都同步更新了页面元素显示，但是这样操作变量时都加了 state.，这似乎并不爽，你想到了 ES6 的展开操作：

    setup(){
        const state = reactive({
            name:"张三",
            age:20
        })
        return{
            ...state
        }
    }

这样再调用时就不需要写成 state.name了，直接写 name 就好，页面也能正常显示，但是你点击了 div 后发现又不能同步更新页面元素了，这是怎么回事？

把鼠标移上去看看，发现已经变成了普通 String，失去了响应式，这怎么办？

toRefs 的作用：

<template>
    <div>
        <div @click="name='李四'">{{name}}</div>
        <div @click="age=21">{{age}}</div>
    </div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
    name:'Page2',
    setup(){
        const state = reactive({
            name:"张三",
            age:20
        })
        return{
            ...toRefs(state)
        }
    }
}

其它都没变，你把 state 加了个 toRefs，再点击元素，发现页面同步更新了，说明 toRefs 把这种展开的列表里的元素又加上了响应式属性。