Vue组件中监听data和prop变化：避免命名冲突与高级监听技巧

// 监听 data 属性
data() {
  return {
    internalValue: 0
  }
},
watch: {
  internalValue(newValue, oldValue) {
    console.log('Internal value changed:', newValue);
  }
}

// 监听 prop 属性
props: ['externalValue'],
watch: {
  externalValue(newValue, oldValue) {
    console.log('External value changed:', newValue);
  }
}

// 尝试同时拥有同名 prop 和 data
props: ['p'],
data() {
  return {
    p: 0 // 与 prop 同名
  }
},
watch: {
  p(newValue, oldValue) {
    // 这个 watcher 会监听 prop 还是 data？
  }
}

<template>
  <div>
    <p>外部传入的P (Prop): {{ externalP }}</p>
    <p>组件内部的P (Data): {{ internalP }}</p>
  </div>
</template>

<script>
export default {
  props: ['externalP'], // 外部传入的 prop
  data() {
    return {
      internalP: 0 // 组件内部状态，避免与 prop 冲突
    };
  },
  watch: {
    // 独立监听 prop 'externalP' 的变化
    externalP(newValue, oldValue) {
      console.log('Prop externalP changed from', oldValue, 'to', newValue);
      // 执行针对 prop 变化的逻辑
    },
    // 独立监听 internalP (data) 的变化
    internalP(newValue, oldValue) {
      console.log('Internal Data internalP changed from', oldValue, 'to', newValue);
      // 执行针对内部数据变化的逻辑
    }
  },
  created() {
    // 模拟内部数据变化
    setInterval(() => {
      this.internalP++;
    }, 2000);
  }
};
</script>

<template>
  <div>
    <p>Prop P: {{ p }}</p>
    <p>Internal Data P: {{ internalP }}</p>
  </div>
</template>

<script>
import { watch } from 'vue'; // 引入 Composition API 的 watch
export default {
  props: ['p'],
  data() {
    return {
      internalP: 123 // 内部数据，这里我们假设它与 prop 'p' 有意区分
    };
  },
  onMounted() {
    // 使用 Composition API 的 watch 明确监听 $data.internalP
    // 即使名称不冲突，这种方式也提供了更明确的监听目标
    watch(() => this.$data.internalP, (newValue, oldValue) => {
      console.log('Composition API Watcher - Internal Data P changed:', newValue);
    });

    // 同样可以明确监听 prop 'p'，尽管 Options API 的 watch 也能做到
    watch(() => this.p, (newValue, oldValue) => {
      console.log('Composition API Watcher - Prop P changed:', newValue);
    });
  },
  created() {
    setInterval(() => {
      this.internalP++;
    }, 3000);
  }
};
</script>

<template>
  <div>
    <p>Prop P: {{ p }}</p>
    <p>Setup P: {{ setupP }}</p>
  </div>
</template>

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

export default defineComponent({
  props: ['p'], // 外部传入的 prop
  setup(props) {
    const setupP = ref(0); // 定义内部响应式状态，使用 ref

    // 监听内部 ref 状态的变化
    watch(setupP, (newValue, oldValue) => {
      console.log('Setup P (ref) changed from', oldValue, 'to', newValue);
    });

    // 监听 prop 'p' 的变化
    // 注意：props 对象本身是响应式的，但其属性不是 ref，需要用 getter 函数来监听
    watch(() => props.p, (newValue, oldValue) => {
      console.log('Prop P (from setup) changed from', oldValue, 'to', newValue);
    });

    // 模拟内部状态变化
    setInterval(() => {
      setupP.value++; // 访问 ref 的值需要 .value
    }, 2500);

    return {
      setupP // 暴露给模板使用
    };
  }
});
</script>