<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,这样在解构赋值时能够保持响应性。
这个响应性到底是什么意思俺也不知道