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)