目录在 Vue 3 中，假如你想监听 reactive 对象中的某个属性发生的变化，你可以使用 watch 函数进行监听。watch 函数答应你观察 reactive 对象的某个属性大概整个对象，并在变化时实行相应的操作。 1. 监听 reactive 对象的某个属性假如你只想监听 reactive 对象的某个特定属性，可以直接在 watch 中传入该属性。 [code]import { reactive, watch } from 'vue'; const state = reactive({ name: 'John', age: 30, location: 'New York', }); // 监听 name 属性的变化 watch(() => state.name, (newValue, oldValue) => { console.log(`Name changed from ${oldValue} to ${newValue}`); }); [/code]2. 监听整个 reactive 对象并检查是哪一个属性发生了变化假如你必要监听整个 [code]reactive[/code] 对象，并确定到底是哪个属性发生了变化，可以通过对整个对象进行深度监听 ([code]deep: true[/code])，然后手动检查哪个属性发生了变化。 [code]import { reactive, watch } from 'vue'; const state = reactive({ name: 'John', age: 30, location: 'New York', }); // 监听整个对象的变化 watch( state, (newValue, oldValue) => { for (const key in newValue) { if (newValue[key] !== oldValue[key]) { console.log(`${key} changed from ${oldValue[key]} to ${newValue[key]}`); } } }, { deep: true } // 深度监听 ); [/code]3. 监听多个属性假如你必要监听多个特定的属性，你可以使用多个 [code]watch[/code]，大概通过组合使用 [code]computed[/code] 进行监听。 [code]import { reactive, watch } from 'vue'; const state = reactive({ name: 'John', age: 30, location: 'New York', }); // 监听 name 和 age 属性的变化 watch( () => [state.name, state.age], ([newName, newAge], [oldName, oldAge]) => { if (newName !== oldName) { console.log(`Name changed from ${oldName} to ${newName}`); } if (newAge !== oldAge) { console.log(`Age changed from ${oldAge} to ${newAge}`); } } ); [/code]4. 使用 toRefs 进行属性监听你可以将 [code]reactive[/code] 对象的属性转换为 [code]ref[/code]，然后使用 [code]watch[/code] 监听这些 [code]ref[/code]。 [code]import { reactive, toRefs, watch } from 'vue'; const state = reactive({ name: 'John', age: 30, location: 'New York', }); const { name, age } = toRefs(state); // 监听 name 属性的变化 watch(name, (newValue, oldValue) => { console.log(`Name changed from ${oldValue} to ${newValue}`); }); // 监听 age 属性的变化 watch(age, (newValue, oldValue) => { console.log(`Age changed from ${oldValue} to ${newValue}`); }); [/code]总结
这些方法可以资助你机动地监听 [code]reactive[/code] 对象中的属性变化，根据实际需求选择符合的方式。 到此这篇关于Vue3监听reactive对象中属性变化的方法的文章就先容到这了,更多相关Vue3监听reactive属性变化内容请搜索脚本之家从前的文章或继续浏览下面的相关文章盼望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/326722lr4.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:45 , Processed in 0.027585 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
