Getters and Setters — Uppercase Example

同学们，现在咱们来看这样一个例子，它完整展示了 LWC 里 getter 和 setter 的用法。想象一下，你的组件模板里只需要显示一个 `{itemName}`，看起来很简单对吧？但其实背后藏着数据转换的秘密。 首先，在 JavaScript 类里，你会看到一个带下划线开头的 `_uppercaseItemName`。这个命名约定就是在暗示：嘿，这是一个私有字段，别从组件外面直接碰它。它就是我们存放最终要显示的值的地方。 真正对外的门面是什么呢？是那个用 `@api` 装饰的 getter，名字就叫 `itemName`。注意，是 getter 被设成公开属性，这样父组件就可以用 `item-name` 这个属性给它传值。比如父组件写了 `item-name="milk"`，这时候 setter 就会收到这个 `"milk"`。 Setter 拿到原始值后，第一件事就是把它转换成大写，变成 `"MILK"`，然后存到刚才那个私有字段 `_uppercaseItemName` 里。接着，getter 登场了，它什么都不用做，直接把私有字段的值返回给模板。于是，用户最终在界面上看到的就是大写的 `MILK`。 整个数据流可以这样记：父组件通过属性传给 setter，setter 做一番转换，存进私有字段，getter 再取出来给模板渲染。你看，通过这个模式，我们就能在组件边界上完全掌控数据该如何变化，又不暴露内部细节。这样，组件封装性保持得很好，显示逻辑也足够灵活。