从Svelte转LWC：如何响应式打印父传子Prop的变更？

你有Svelte/React开发经验，对LWC的@api属性已经了解（等同于Svelte的export let声明Prop），现在需要实现类似Svelte中$: console.log(disabled)的效果——当父组件传递的disabled变量变更时自动打印，这里明确说明：@wire和这个需求无关，@wire是用于从Salesforce数据源（比如Apex、UI API）获取响应式数据的，不要用它来监听父组件传入的Prop变更。

原始代码对比 #

// Svelte写法
export let disabled; 
$: console.log(disabled) // 变量变更时自动执行打印

// LWC初始写法
@api disabled; 
// 需要实现等价的变更监听逻辑

等价实现方式：使用@api的getter/setter #

这是最贴合Svelte响应式语句逻辑的写法，通过给@api属性设置setter，每次父组件更新该属性时，setter都会被触发，从而执行打印操作：

import { api } from 'lwc';

export default class YourChildComponent extends LightningElement {
    // 私有变量存储实际值
    _disabled;

    @api 
    get disabled() {
        return this._disabled;
    }
    set disabled(newValue) {
        this._disabled = newValue;
        // 变量变更时打印
        console.log(this._disabled);
    }
}

补充说明 #

如果是复杂类型的Prop（比如对象、数组），LWC默认不会跟踪其内部属性的变更，此时你可能需要结合@track装饰器或者手动触发变更，但对于disabled这类基本类型（布尔、字符串、数字等），上面的setter写法完全够用。

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