LWC setter未触发问题求助：附代码示例及排查情况

问题根源 #

你的代码里displayMessage的setter从未被触发，核心原因有两个：

1. 模板中仅通过{displayMessage}调用了该属性的getter来获取值，没有任何地方给displayMessage赋值——LWC的setter只有在对属性执行赋值操作（this.displayMessage = 值）时才会执行。
2. displayMessage未标记为@api，即使有父组件也无法通过属性传值触发setter，且当前代码也没有父组件传值的场景。

解决方案 #

根据你的需求，有两种常见的处理方式：

方式一：主动赋值触发Setter #

如果必须保留setter逻辑，需要在message更新后主动给displayMessage赋值，触发setter执行。同时注意renderedCallback会多次触发，需加判断避免重复操作：

修改后的JS代码：

import { LightningElement } from 'lwc';
 
export default class GetterSetter extends LightningElement {
   message;
   updatedMessage ='demo';

   connectedCallback(){
    this.message='2';
    // 赋值触发setter
    this.displayMessage = this.message;
   }

   renderedCallback(){
    // 避免renderedCallback重复执行赋值
    if(this.message !== '3'){
      this.message='3';
      this.displayMessage = this.message;
    }
   }

   get displayMessage(){
    return this.message;
   }

   set displayMessage(value) {
    this.updatedMessage = value.toUpperCase();
   }
}

方式二：直接用Getter返回处理后的值 #

如果你的需求只是将message转为大写后展示，完全可以不用setter，直接通过getter处理，这种方式更简洁：

修改后的JS代码：

import { LightningElement } from 'lwc';
 
export default class GetterSetter extends LightningElement {
   message;

   connectedCallback(){
    this.message='2';
   }

   renderedCallback(){
    if(this.message !== '3'){
      this.message='3';
    }
   }

   get displayMessage(){
    return this.message;
   }

   // 直接通过getter返回处理后的值
   get updatedMessage(){
    return this.message ? this.message.toUpperCase() : 'demo';
   }
}

额外说明 #

LWC中getter和setter的设计逻辑：

• Getter：每次组件渲染时，若模板引用了该属性，就会调用getter获取最新值。
• Setter：只有当代码中对该属性执行赋值操作时才会触发，常用于处理外部传入的@api属性的格式转换、校验等场景。

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