Vue3中toRef和toRefs

toRef

toRef 用於為源響應式對象上的屬性新建一個ref，從而保持對其源對象屬性的響應式連接。

接收兩個參數：源響應式對象和屬性名，返回一個ref數據。
例如使用父組件傳遞的props數據時，要引用props的某個屬性且要保持響應式連接時就很有用。

import {defineProps, toRef} from "vue"
const props = defineProps({
    route:{
        type:String,
        default(){
            return  ""
        }
    },
    title:{
        type:String,
        default(){
            return  ""
        }
    }
})
const route = toRef(props, "route")
const title= toRef(props, "title")

toRefs

toRefs 用於將響應式對象轉換為結果對象，其中結果對象的每個屬性都是指向原始對象相應屬性的ref。

常用於es6的解構賦值操作，因為在對一個響應式對象直接解構時解構后的數據將不再有響應式，而使用toRefs可以方便解決這一問題。

其實和toRef很類似，只是裝在了一個對象里，解構方便拿到

import {defineProps, toRefs} from "vue"
const props = defineProps({
    route:{
        type:String,
        default(){
            return  ""
        }
    },
    title:{
        type:String,
        default(){
            return  ""
        }
    }
})
const {route, title} = toRefs(props)