在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>
