Example: Reactive Strings — helloExpressions JS

同学们，咱们今天来聊聊 LWC 里的 JavaScript 反应链是怎么工作的，这一段虽然简短，但把响应式的精髓都点出来了，咱们一句句拆开看。 首先，你看这页面里有两个输入框，分别绑定着 firstName 和 lastName 这两个属性。它们一开始都是空字符串，所以页面刚加载时，你看到的是空的输入框。 接着，当你在输入框里打字，比方说你在姓的框里输入内容，框架就会通过一个叫 handleChange 的方法来响应。这个方法很聪明，它不针对每个输入框单独写处理函数，而是用事件对象的 target.name 来区分到底是哪个字段被修改了。这样，不管你有多少个输入框，只要名字匹配类里的属性名，这一个方法就全能处理，代码特别干净。 然后，我们定义了一个叫做 uppercasedFullName 的 getter 访问器。它用模板字符串把 firstName 和 lastName 拼在一起，中间加个空格，再去掉前后空白，最后整个转换成大写。你可能会问：为什么我在页面里直接用 {uppercasedFullName} 就能看到大写全名呢？这就是反应链的核心了。 因为咱们在 getter 里用到了 firstName 和 lastName，而且在模板里又用到了这个 getter。当你在任何一个输入框里输入，LWC 的响应式引擎就会检测到这两个属性的变化，接着它会重新计算 uppercasedFullName 这个 getter，拿到新的值，然后再把模板里对应的地方更新掉。整个流程是自动的，你不用手动去叫框架刷新。 这里要特别注意一点：只有我们在类里提前声明好的字段，像这里的 firstName、lastName，才是反应式的。如果你在运行时随意给对象新增一个属性，比如用 this.someNewProp = 'abc' 这种 expando 属性，框架是不会理你的，它不会触发重新渲染。所以一定要在类体里把需要的属性都声明好，这样才能享受到响应式带来的自动更新。 好了，简单总结一下：反应链就是把属性变化、getter 重新计算、模板自动渲染串在一起的一条线。你改数据，我自动算，页面跟着变，这就是 LWC 让我们省心的地方。