Was ist toRefs?
Konvertieren Sie ein reaktionsfähiges Objekt in ein gewöhnliches Objekt. Jede Eigenschaft des gewöhnlichen Objekts ist eine Referenz.
Verstehen:
Erwartung: „Xiao Ming =========…“ wird auf der Seite angezeigt;
Tatsächlich: „Xiao Ming“ wird auf der Seite angezeigt und der Name in myData kann nicht antworten.
<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>
Lösung: Konvertieren Sie alle ursprünglichen Eigenschaften eines responsiven reaktiven Objekts mithilfe von toRefs in responsive Ref-Eigenschaften.
toRefs:
- Wickeln Sie alle Eigenschaften im reaktionsfähigen Objekt als Referenzobjekte ein und geben Sie normale Objekte zurück, die diese Referenzobjekte enthalten.
- Anwendung: toRefs ist nützlich, wenn reaktive Objekte aus zusammengesetzten Funktionen zurückgegeben werden.
- Auf diese Weise kann die Verbraucherkomponente das zurückgegebene Objekt zerlegen und verwenden, ohne die Reaktionsfähigkeit zu verlieren
<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>