ref是對原始數據的拷貝，當修改ref數據時，模板中的視圖會發生改變，但是原始數據并不會改變。
toRef是對原始數據的引用，修改toRef數據時，原始數據也會發生改變，但是視圖并不會更新。

在vue3中定義一個基礎類型的響應式數據一般使用ref，定義一個引用類型的響應式數據一般使用reactive。

import {ref,reactive} from "vue"
export default {
    setup(){
    let num=ref(0)
    let obj=reactive({name:'張三',age:18})
    return {num,obj}    
}
}

這樣在模板中使用的時候，就可以直接通過{{num}}，{{obj.name}},{{obj.age}}獲取數據了。

基礎類型的數據沒有問題，但是引用類型的值在模板中這樣寫就比較累贅了，我們也可以直接解構出來，在模板中就可以直接使用{{name}}和{{age}}了。

import {ref,reactive} from "vue"
export default {
    setup(){
        let num=ref(0)
        let obj=reactive({name:'張三',age:18})
        let {name,age}=obj
        return {num,name,age}
    }
}

toRef是將對象中的某個值轉化為響應式數據 toRef(obj,key)

import {toRef} from "vue"
export default {
    setup() {
        let obj = { name: '張三', age: 18 };
        let newObj = toRef(obj, 'name');
        setTimeout(() => {
            newObj.value = '李四';
            console.log(obj, newObj); //obj中的name和newObj都變成李四了，但是視圖顯示還是張三，不會變化
        }, 2000);
        return { obj, newObj };
    },
};
</script>

toRef是對原始數據的引用，修改toRef數據時，原始數據也會發生改變，但是視圖并不會更新。

toRefs是將整個對象轉化成響應式數據 toRefs(obj)

import {toRefs} from "vue"
export default {
    let obj = { name: '張三', age: 18 };
        let newObj = toRefs(obj);
        setTimeout(() => {
            newObj.name.value = '李四';
            console.log(obj, newObj);
        }, 2000);
        return { obj, newObj };
}

需要注意的是，按照上面這種寫法，在模板中使用的時候，需要按照這種方式 {{newObj.name.value}}（不太理解），如果想直接使用{{name}}，那么在setup中return的時候需要解構下

import {toRefs} from "vue"
export default {
    let obj = { name: '張三', age: 18 };
        let newObj = toRefs(obj);
        setTimeout(() => {
            newObj.name.value = '李四';
            console.log(obj, newObj);
        }, 2000);
        return { obj, ...newObj };
}

這樣在模板中就可以直接通過{{name}}來獲取了。

小結一下

1、ref是對元數據的拷貝，修改響應式數據時不會影響之前的數據，視圖會更新

2、toRef和toRefs是對元數據的引用，修改響應式數據時，元數據也會改變，但是視圖不會更新，toRef修改的是對象的某個屬性，toRefs修改的是整個對象

3、toRefs的使用場景：如果想讓響應式數據和原來的數據關聯起來同步更新，并且不更新視圖，那么就可以使用toRefs