toRef
toRef和ref一樣都是生成影響式數(shù)據(jù)的API，但是toRef和ref又有一定的區(qū)別
- toRef和傳入的數(shù)據(jù)形成引用關(guān)系隆嗅，修改toRef會影響之的數(shù)據(jù)蔫浆，但是不會更新UI
- ref是單純的復(fù)制,影響不影響之前復(fù)制的數(shù)據(jù)，取決于復(fù)制的數(shù)據(jù)類型软啼，但是會更新UI
- ref 數(shù)據(jù)會引起監(jiān)聽行為桑谍，而 toRef 不會
<template>
<div class="page-wrapper">
<p>-------------------------------toRef--------------------------</p>
<p>toRefAge: {{toRefAge}}</p>
<button @click="toRefAgeChange">toRefAgeChange</button>
<p>refAge: {{refAge}}</p>
<button @click="refAgeChange">refAgeChange</button>
</div>
</template>
<script lang="js">
import { defineComponent, ref, toRef, watchEffect} from 'vue';
export default defineComponent({
name: 'toRef-test',
setup(){
let stu= {
name: 'zs',
age: 18
};
let refAge= ref(stu.age);
// let refAge= ref(stu)
let toRefAge= toRef(stu, 'age');
function toRefAgeChange(){
toRefAge.value++;
console.log('stu.age', stu.age);
console.log('toRefAge.value', toRefAge.value);
}
function refAgeChange(){
refAge.value++;
console.log('stu.age', stu.age);
console.log('refAge.value', refAge.value);
}
watchEffect(function(){
console.log('watchEffect enter:', toRefAge.value, refAge.value);
})
return {
toRefAge,
toRefAgeChange,
refAge,
refAgeChange
}
}
})
</script>
toRefs
當(dāng)要拆解一個對象的多個屬性的時候延柠，可以調(diào)用toRefs
<template>
<div class="page-wrapper">
<p>-------------------------------toRefs--------------------------</p>
<p>name: {{refsStu.name.value}}</p>
<p>age: {{refsStu.age.value}}</p>
<button @click="ageChange">click一下,age++</button>
</div>
</template>
<script lang="js">
import { defineComponent, reactive, toRefs} from 'vue';
export default defineComponent({
name: 'toRefs-test',
setup(){
let stu= reactive({
name: 'zs',
age: 18
});
//響應(yīng)式拆解
let refsStu= toRefs(stu);
// let {name, age}= stu;
function ageChange() {
refsStu.age.value++;
// age++;
console.log('stu.age', stu.age)
// console.log('age', age.value)
// console.log('age', age)
}
return {
refsStu,
// name,
// age,
ageChange
}
}
})
</script>
