StencilJS自定义装饰器失效：与@Prop共存时无法运行

问题原因分析 #

你的自定义装饰器在Stencil组件中与@Prop共存时失效，核心原因有两个：

1. 装饰器调用方式错误
   你定义的CustomDecorator是返回装饰器函数的工厂函数，必须通过@CustomDecorator()的方式调用才能生成正确的装饰器。原代码中@CustomDecorator的写法没有调用工厂函数，相当于把工厂函数本身当作装饰器使用，逻辑完全不生效。

2. 装饰器执行顺序与描述符覆盖
   TypeScript属性装饰器的执行顺序是从下到上，即下方的装饰器先执行。如果把自定义装饰器放在@Prop上方，会先执行自定义装饰器修改属性描述符，随后执行的@Prop会完全覆盖这个描述符——因为Stencil的@Prop会为属性重新定义一套用于组件属性管理的getter/setter，你的自定义逻辑自然会被冲掉。

解决方案 #

方案一：修正装饰器调用方式并调整顺序

把自定义装饰器放在@Prop下方，确保先执行@Prop生成核心逻辑，再让自定义装饰器包裹它的setter：

// 自定义装饰器（逻辑不变，保留工厂函数结构）
function CustomDecorator() {
  return function(target: any, propertyKey: string) {
    const descriptor = Object.getOwnPropertyDescriptor(target, propertyKey) || {};
    const originalSetter = descriptor.set;

    descriptor.set = function(value: any) {
      // 在这里添加你的验证/预处理逻辑
      console.log('自定义逻辑触发，新值:', value);
      
      if (originalSetter) {
        originalSetter.call(this, value);
      }
    };

    Object.defineProperty(target, propertyKey, descriptor);
  };
}

// 组件代码调整顺序并修正调用
@Component({
  tag: 'my-component',
})
export class MyCustomComponent {
  @Prop()
  @CustomDecorator() // 加括号，且放在@Prop下方
  fields = '';
}

方案二：使用Stencil官方@Watch装饰器（更推荐）

自定义装饰器可能和Stencil的编译逻辑存在兼容性问题，官方提供的@Watch装饰器专门用于监听组件属性变化，更稳定且符合Stencil生态：

@Component({
  tag: 'my-component',
})
export class MyCustomComponent {
  @Prop()
  fields = '';

  @Watch('fields')
  onFieldsChange(newValue: string, oldValue: string) {
    // 执行你的验证与预处理逻辑
    const processedValue = newValue.trim();
    // 如果需要修正属性值，直接赋值即可（会触发Stencil的属性更新逻辑）
    if (processedValue !== newValue) {
      this.fields = processedValue;
    }
  }
}

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