toRef とは何ですか?
応答オブジェクトを通常のオブジェクトに変換します。通常のオブジェクトの各プロパティは ref です。
理解:
期待: 「Xiao Ming ========...」がページに表示されます;
実際: 「Xiao Ming」がページに表示され、myData 内の名前は応答できません。
<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>
解決策: toRef を使用して、応答性の高いリアクティブ オブジェクトの元のプロパティをすべて応答性の ref プロパティに変換します。
toRef:
- 応答オブジェクト内のすべてのプロパティを ref オブジェクトとしてラップし、これらの ref オブジェクトを含む通常のオブジェクトを返します。
- アプリケーション: toRefs は、複合関数からリアクティブ オブジェクトを返すときに便利です。
- このようにして、コンシューマ コンポーネントは、応答性を失うことなく、返されたオブジェクトを分解して使用できます。
<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>