LWC中变量变更时触发指定方法的实现方式

要实现变量变更时自动触发指定方法，最直接且符合LWC最佳实践的方式是使用getter/setter包装变量，替代单纯的@track声明。以下是具体实现：

实现代码 #

import { LightningElement, track } from 'lwc';

export default class YourComponentName extends LightningElement {
    // 私有变量，用@track监听复杂类型内部变化（如对象、数组）
    @track _displayedData;

    // 公共访问入口：getter方法
    get displayedData() {
        return this._displayedData;
    }

    // 赋值触发逻辑：setter方法
    set displayedData(newValue) {
        this._displayedData = newValue;
        // 变量变更时自动调用目标方法
        this.handleDisplayedDataChanged();
    }

    handleDisplayedDataChanged() {
        console.log('run');
        // 这里添加变量变更后的业务逻辑
    }
}

关键说明 #

1. 触发时机：无论组件内部通过this.displayedData = xxx赋值，还是父组件通过属性传递修改该变量，setter都会被调用，进而触发handleDisplayedDataChanged方法。
2. 复杂类型处理：如果displayedData是对象、数组这类复杂类型，@track用于监听其内部属性的变化（确保组件重新渲染）。但要触发方法，需重新赋值整个对象/数组（而非直接修改内部属性），例如：

   // 正确：创建新对象，触发setter
   this.displayedData = { ...this.displayedData, key: '新值' };
   
   // 错误：仅修改内部属性，不会触发setter（但组件仍会因@track重新渲染）
   this.displayedData.key = '新值';
   

3. 公共属性适配：如果displayedData是对外暴露的公共属性（需被父组件修改），只需在getter上添加@api装饰器即可：

   @api
   get displayedData() {
       return this._displayedData;
   }
   

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