栏目树
vue3 watch深度监听

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