¿Qué es toRefs?
Convierta un objeto receptivo en un objeto ordinario. Cada propiedad del objeto ordinario es una referencia;
Comprenda:
Expectativa: "Xiao Ming =========..." se muestra en la página;
Real: "Xiao Ming" se muestra en la página y el nombre en myData no puede responder.
<template>
<h3>{
{ name }}</h3> <!--通过方式一，无法响应-->
<!-- <h3>{
{ myData.name }}</h3> 通过方式二，可以响应 -->
</template>
<script lang="ts">
const myData = reactive({
name: '小明',
age: 12
})
setInerval(()=>{
myData.name += '==='
}, 1000)
return {
...myData // 通过方式一，解构的方式无法使其内部形成响应式
// myData 通过方式二，可以响应
}
</script>
Solución: convierta todas las propiedades originales de un objeto reactivo responsivo en propiedades de referencia responsivas mediante toRefs;
a Referencias:
- Envuelva todas las propiedades en el objeto receptivo como objetos de referencia y devuelva objetos ordinarios que contengan estos objetos de referencia;
- Aplicación: toRefs es útil cuando se devuelven objetos reactivos de funciones compuestas;
- De esta manera, el componente del consumidor puede descomponer y utilizar el objeto devuelto sin perder capacidad de respuesta.
<template>
<h2>App</h2>
<h3>foo: {
{foo}}</h3>
<h3>bar: {
{bar}}</h3>
<h3>foo2: {
{foo2}}</h3>
<h3>bar2: {
{bar2}}</h3>
</template>
<script lang="ts">
import {
reactive, toRefs } from 'vue'
/*
*/
export default {
setup () {
const state = reactive({
foo: 'a',
bar: 'b',
})
const stateAsRefs = toRefs(state)
setTimeout(() => {
state.foo += '++'
state.bar += '++'
}, 2000);
const {
foo2, bar2} = useReatureX()
return {
// ...state,
...stateAsRefs,
foo2,
bar2
}
},
}
function useReatureX() {
const state = reactive({
foo2: 'a',
bar2: 'b',
})
setTimeout(() => {
state.foo2 += '++'
state.bar2 += '++'
}, 2000);
return toRefs(state)
}
</script>