Vue中如何避免属性（Props）与数据（Data）命名冲突并进行精准监听

// 这是一个会导致命名冲突的示例，请勿在实际项目中使用
export default {
  props: ['p'],
  data() {
    return {
      p: 0 // 与props中的'p'同名，导致冲突
    }
  },
  watch: {
    p() {
      // 这个watcher会同时被prop 'p'和data 'p'的变化触发，行为模糊
    }
  }
}

export default {
  props: ['initialValue'], // 外部传入的值
  data() {
    return {
      localValue: this.initialValue // 内部状态，基于prop初始化
    }
  },
  watch: {
    // 监听prop的变化
    initialValue(newValue, oldValue) {
      console.log('Prop initialValue changed:', newValue);
      // 根据需要更新内部状态
      this.localValue = newValue;
    },
    // 监听data的变化
    localValue(newValue, oldValue) {
      console.log('Data localValue changed:', newValue);
    }
  }
}

import { watch, defineComponent } from 'vue';

export default defineComponent({
  props: ['p'], // 假设有一个名为'p'的prop
  data: () => ({
    localP: 123 // 内部数据，与prop名称不同
  }),
  onMounted() {
    // 使用Composition API的watch函数监听data中的localP
    watch(() => this.$data.localP, (newValue, oldValue) => {
      console.log('Composition API watch: Data localP changed:', newValue);
    });

    // 监听prop 'p' (Options API方式依然有效，但需确保名称不冲突)
    // watch(() => this.p, (newValue) => {
    //   console.log('Composition API watch: Prop p changed:', newValue);
    // });
  },
  // Options API的watch依然可以用于监听props或data
  watch: {
    p(newValue) {
      console.log('Options API watch: Prop p changed:', newValue);
    }
  }
});

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

export default defineComponent({
  props: {
    externalP: { // 明确定义prop
      type: Number,
      default: 0
    }
  },
  setup(props) { // props作为setup的第一个参数
    const internalP = ref(123); // 内部响应式数据，使用ref

    // 监听内部响应式数据 internalP
    watch(internalP, (newValue, oldValue) => {
      console.log('Setup watch: internalP changed:', newValue);
    });

    // 监听从父组件传入的 prop externalP
    watch(() => props.externalP, (newValue, oldValue) => {
      console.log('Setup watch: externalP changed:', newValue);
      // 可以根据prop变化更新内部状态
      // internalP.value = newValue;
    });

    return {
      internalP // 暴露给模板使用
    };
  }
});