toRefs
是 Vue 3 中的一个函数,它接收一个响应式对象,并返回该对象属性的浅层响应式代理。这意味着返回的对象中的每个属性都是一个 ref 对象,可以在模板中以响应式方式使用。
这样做的好处是,当原始响应式对象的属性发生变化时,通过 toRefs
转换后的对象中相应属性的值也会自动更新。
<template>
<div>
<!--搜索-->
<div style="float: left">
<el-input v-model="username" style="width: 350px" placeholder="请输入搜索的用户姓名" />
</div>
</template>
<script>
import {reactive, toRefs} from "vue";
export default {
setup(){
const data=reactive({
username:''
})
return{
...toRefs(data)
}
}
}
</script>
使用...toRefs可以一次性返回data的所有属性,这样在使用data中的属性是可以不用使用data.username去使用了!