Vue 3 教程：如何在 data 和 props 属性同名时精确监听变更

export default {
  props: ['p'], // 外部传入的 'p'
  data() {
    return { p: 0 } // 组件内部的 'p'
  },
  watch: {
    p(newValue, oldValue) {
      // 这个 watcher 监听的是 this.p，
      // 当 props.p 改变或 $data.p 改变时，都可能触发
      console.log('this.p changed:', newValue, '旧值:', oldValue);
    }
  }
}

import { defineComponent, watch, onMounted } from 'vue';

export default defineComponent({
  props: ['p'], // 假设 props 也有一个 'p'
  data() {
    return {
      p: 123 // data 中定义的 'p'
    };
  },
  onMounted() {
    // 在组件挂载后，监听 this.$data.p 的变化
    watch(
      () => this.$data.p, // 监听源：一个返回 data.p 值的 getter 函数
      (newValue, oldValue) => {
        console.log('data.p 发生变化:', newValue, '旧值:', oldValue);
        // 只有当 this.$data.p 改变时，此回调才会被触发
      },
      // { deep: true } // 如果 p 是对象，可能需要深度监听
    );
  }
});

import { defineComponent, watch } from 'vue';

export default defineComponent({
  props: ['p'], // props 中定义的 'p'
  data() {
    return {
      p: 123 // 假设 data 中也有一个 'p'
    };
  },
  setup(props) {
    // 在 setup 函数中，props 是响应式的
    watch(
      () => props.p, // 监听源：直接访问 setup 参数 props 中的 p
      (newValue, oldValue) => {
        console.log('props.p 发生变化:', newValue, '旧值:', oldValue);
        // 只有当 props.p 改变时，此回调才会被触发
      },
      // { immediate: true } // 可选：立即执行一次监听
    );

    // setup 必须返回一个对象，该对象中的属性会暴露给模板
    return {};
  }
});

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

export default defineComponent({
  props: {
    externalP: { // 将 props 的名称明确化，避免与内部状态冲突
      type: Number,
      default: 0
    }
  },
  setup(props) {
    // 定义内部响应式状态，使用清晰的名称
    const internalP = ref(123);

    // 监听内部状态
    watch(internalP, (newValue, oldValue) => {
      console.log('内部状态 internalP 发生变化:', newValue);
    });

    // 监听外部 props
    watch(() => props.externalP, (newValue, oldValue) => {
      console.log('外部 props.externalP 发生变化:', newValue);
    });

    // 将内部状态暴露给模板
    return {
      internalP
    };
  }
});