Vue类式TypeScript组件中Prop的Watch失效及Getter/Setter报错问题

一、为什么@Watch方法没触发？ #

你遇到的这个问题，常见原因有这几个，咱们一个个排查：

• 父组件传入的值根本没变化：先确认父组件里的masterDatasourceId是不是真的在ajax请求后更新了。比如可以在父组件里打印这个值，看看ajax返回后有没有变成新的number——如果前后值一样，watch自然不会触发。另外要确保父组件里的这个值是响应式的（比如放在data里或者用ref声明），如果是直接修改普通变量，子组件是感知不到的。

• Watch没监听初始赋值：如果父组件初始时masterDatasourceId是undefined（因为ajax还没返回），之后才变成有效的number，默认情况下@Watch只会监听值的变更，不会监听从undefined到有效值的第一次赋值。这时候你需要给@Watch加immediate: true选项，让它在组件初始化时就执行一次：

  @Watch('masterDatasourceId', { immediate: true })
  masterDatasourceIdChanged(newVal: number) {
    console.log('触发了！新值：', newVal);
  }
  

• 装饰器导入或使用错误：检查一下你是不是从正确的包导入了Watch装饰器——比如用vue-property-decorator的话，要确保导入语句是import { Prop, Watch } from 'vue-property-decorator';，如果漏了导入Watch，那这个装饰器根本不会生效。

二、为什么Getter/Setter写法会报错？ #

你这个报错The computed property "masterDatasourceId" is already defined as a prop.是Vue的核心规则导致的：同一个名称不能同时作为Prop和计算属性（包括带get/set的计算属性）。你写的@Prop()和get/set masterDatasourceId重名了，Vue不知道该优先处理哪个，所以直接抛出错误。

正确的做法是把内部的变量名改成不一样的，或者直接用Watch来处理逻辑，这里给你两种可行方案：

方案1：用Watch监听Prop同步内部变量 #

@Prop() masterDatasourceId!: number;

// 用内部变量存需要处理的值
private _internalMasterId!: number;

@Watch('masterDatasourceId', { immediate: true })
onMasterIdChange(newVal: number) {
  console.log('在这里处理你的逻辑！');
  this._internalMasterId = newVal;
}

方案2：区分Prop名和内部get/set变量名 #

如果一定要用get/set，那就不要把masterDatasourceId声明为Prop，而是让父组件传给另一个Prop，通过watch同步到内部变量：

@Prop() rawMasterDatasourceId!: number;

private _masterDatasourceId!: number;

public get masterDatasourceId(): number {
  return this._masterDatasourceId;
}

public set masterDatasourceId(value: number) {
  // 注意：不要直接修改父组件传来的Prop，要通过$emit通知父组件更新
  console.log('处理逻辑...');
  this.$emit('update:rawMasterDatasourceId', value);
}

// 同步Prop到内部变量
@Watch('rawMasterDatasourceId', { immediate: true })
syncMasterId(newVal: number) {
  this._masterDatasourceId = newVal;
}

内容的提问来源于stack exchange，提问作者Anonymous Creator