toRef和toRefs

toRef和toRefs

不解构 的情况下，确实 不需要 使用 toRefs 或 toRef。这两个方法主要用于解决 解构 时丧失响应性的问题。

//toRefs将一个响应式对象的所有属性转换为ref对象//let {name,url} = toRefs(web)//toRef将一个响应式对象的某个属性转换为ref变量

<template><div><!-- {{ name }} - {{ url }} --></div>
</template><script setup>
import {reactive,toRefs,toRef} from 'vue'// const {name,url} = reactive({ 
//   //结构之后的数据不是响应式数据，而是数据本身的类型 这里的name:number url:string
//   name: 123,
//   url: 'app msg'
// })
const web = reactive({ //结构之后的数据不是响应式数据，而是数据本身的类型 这里的name:number url:stringname: 123,url: 'app msg',age: 18
})
// let {name,url} = toRefs(web)
let age = toRef(web,'name')// console.log(typeof name) //object
// console.log(typeof url); //object
console.log(typeof age); //object
</script><style lang="scss" scoped></style>