BackdraftJS中为何可通过下划线前缀变量设置watchable？

先看示例代码：

class TestComponent extends Component.withWatchables('veg') {
    constructor( kwargs ) {
        super( kwargs );
        
        // 'veg' 是watchable
        this._veg = 'carrot';
        console.log(this.veg);    // 'carrot'
        
        // 'fruit' 不是watchable
        this._fruit = 'banana';
        console.log(this.fruit);  // undefined
    }

    bdElements() {
        return e.div('hi there');
    }
}

1. 为什么this._veg能对应this.veg？ #

BackdraftJS的withWatchables方法会自动为声明的watchable属性生成getter和setter访问器。当你访问this.veg时，本质是调用了自动生成的getter方法，它会读取对应的私有字段this._veg；同理，若通过this.veg = 值设置属性，会调用setter来更新this._veg的值。

而fruit没被声明为watchable，框架不会生成对应的getter/setter，所以哪怕你定义了this._fruit，直接访问this.fruit也会返回undefined。

2. 这种设计的目的是什么？ #

• 封装与数据安全：用下划线前缀的字段存储实际数据，对外暴露不带下划线的访问器，避免外部直接篡改内部状态，保证组件状态的可控性。
• 自动响应式更新：watchable的setter内置了Backdraft的响应式逻辑——当你通过this.veg = xxx修改值时，框架会自动触发组件重渲染、通知监听该属性的回调等操作；直接修改_veg则不会触发这些行为。
• 统一状态规范：通过下划线前缀的约定，让组件状态结构更清晰，开发者一眼就能区分哪些是受框架管控的watchable属性，哪些是普通私有变量。

3. 直接设置this.veg = xxx和修改this._veg的区别？ #

• 响应式触发差异：设置this.veg = xxx会触发框架的响应式机制，自动更新视图、执行关联的watch回调；直接修改this._veg只是改变了内部变量的值，框架完全感知不到，不会有任何更新动作。
• 逻辑绕过风险：watchable的setter可以自定义扩展（比如数据校验、格式转换），直接操作_veg会跳过这些逻辑，可能导致数据状态不一致。
• 代码可维护性：直接操作下划线字段属于打破封装的写法，不符合Backdraft的设计规范，会让状态变更的追踪和维护变得困难。

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