vue3 深度监听

// 使用 Vue 3 的 watch 深度监听对象或数组的变化

<template>
  <div>
    <input v-model="user.name" placeholder="Enter name" />
    <input v-model="user.age" placeholder="Enter age" />
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue';

export default {
  setup() {
    // 定义一个响应式对象
    const user = reactive({
      name: '',
      age: ''
    });

    // 深度监听 user 对象的变化
    watch(user, (newValue, oldValue) => {
      console.log('user changed:', newValue, oldValue);
    }, { deep: true });

    return {
      user
    };
  }
};
</script>

解释说明：

1. reactive: 创建一个响应式对象 user，它包含 name 和 age 属性。
2. watch: 监听 user 对象的变化。通过传递第三个参数 { deep: true }，可以实现深度监听，即当 user 对象内部的属性发生变化时也会触发监听回调。
3. 回调函数：在回调函数中，可以获取到变化前后的值 (newValue 和 oldValue)，并执行相应的逻辑（如打印日志）。

这种方式适用于需要监听复杂对象或数组的变化场景。