Vue中的数据监听

watch可以监听响应式数据变化，在数据变化的时执行操作。

watch的原理

vue2：基于Object.defineProperty的getter/setter实现依赖收集；
Vue3：使用Proxy代理实现深层响应式追踪；
依赖更新时触发调度器执行回调函数。

关键参数配置

watch(source, callback, {
  deep: true,    // 深度监听对象内部变化
  immediate: true, // 立即以当前值触发回调
  flush: 'post'  // 回调触发时机（Vue3新增）
})

vue2中的用法

export default {
  data() {
    return {
      count: 0,
      user: { name: 'John' }
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count changed: ${oldVal} -> ${newVal}`);
    },
    
    // 深度监听对象
    user: {
      handler(newVal) {
        console.log('User changed:', newVal.name);
      },
      deep: true,
      immediate: true
    }
  }
}

vue3中的用法

import { ref, reactive, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = reactive({ age: 10 });

    // 监听ref
    watch(count, (newVal, oldVal) => {
      console.log(`count changed: ${oldVal} -> ${newVal}`);
    });

    // 监听reactive属性
    watch(() => user.age, (newVal, oldVal) => {
      console.log(`name changed: ${oldVal} -> ${newVal}`);
    });

   // 监听多个源
    watch([count, () => user.name], ([newCount, newName]) => {
     console.log(`Multiple sources changed: ${newCount}, ${newName}`);
     });

    return { count, user };
  }
}

watchEffect 和 watch

watch 和watchEffect的主要功能是相同的，都是响应式地执行回调函数。它们区别是追踪响应式数据依赖方式不同：
watch 只追踪明确定义的数据源，不会追踪在访问到的东西；默认情况下，只有在数据源发生改变的时才会触发回调；watch可以访问侦听数据的新值和旧值。
watchEffect 会初始化执行一次，在副作用发生期间追踪依赖，自动分析出侦听的数据源。
watchEffect 无法访问侦听数据的新值和旧值。
总的来说，watch功能更强大,而 watchEffect更简洁。