在Vue3中,你可以使用watch函数来进行深度监听。这里是一个例子:
<template> <div> <input v-model="state.nested.value" /> <p>Nested value: {{ state.nested.value }}</p> </div> </template> <script> import { reactive, watch } from 'vue'; export default { setup() { const state = reactive({ nested: { value: '' } }); watch( state.nested, (newValue, oldValue) => { console.log('Nested object changed:', newValue, oldValue); }, { deep: true // 开启深度监听 } ); return { state }; } }; </script>