<script setup>
import { watch, ref, reactive, toRefs } from 'vue';const count = ref(0);
const obj = reactive({name: '張三',age: 18
});// 我們可以使用toRefs,將reactive對象中的屬性轉換為ref對象,保持響應性!!
const { name, age } = toRefs(obj);watch([count, name, age], ([newCount, newName, newAge], [oldCount, oldName, oldAge]) => {console.log(`count: ${oldCount} -> ${newCount}`);console.log(`name: ${oldName} -> ${newName}`);console.log(`age: ${oldAge} -> ${newAge}`);}
);
</script><template><span>wacth函數的實現:</span><button @click="count=3, obj.name='李四', obj.age=20">點我呀!</button>
</template>
在 Vue 3 中,toRefs
?的作用是將響應式對象的每個屬性轉換為獨立的 ref,這樣在解構賦值時能夠保持響應性。
這個響應性到底是什么意思俺也不知道