Data Binding — Properties & Getters

好，同学们，我们来聊聊Lightning Web Components里的数据绑定和反应式特性，这部分非常关键，懂了它，你的组件就能活起来。 首先看数据绑定，就是怎么把JavaScript里的数据显示到模板上。在HTML模板中我们用大括号 `{}` 括起属性名，比如 `{data}` 或者 `{data.name}`，注意，里面不能有空格，也不能写复杂的表达式，像 `person[2].name` 这种是，不允许，的。所以保持简单，直接引用属性就行。 然后是事件绑定，当我们需要响应用户操作时，比如按钮点击，我们用 `{handlerName}` 的形式把事件和JavaScript里的方法连接起来，注意事件绑定的写法就是在事件属性里直接给方法名，不用加括号。 接着我们说一下，Getters，。如果要显示的值需要一些逻辑计算，官方推荐用getter，也就是 `get 属性名()` 这种JavaScript访问器。它不仅仅是一个计算属性，它本身就是一个函数，方便你写单元测试。所以比起直接在模板里试图写计算，用getter更规范、更易维护。 最棒的是，LWC里的字段都是，反应式，的。啥意思呢？就是说，只要你在模板里直接用了一个属性，或者在getter里间接用到了它，当那个属性的值发生变化时，组件就会自动重新渲染。不需要你手动干预，LWC会自动追踪依赖。 而且一旦重新渲染，模板里所有的表达式都会被重新计算，所以显示的数据始终是最新的。 好了，记住这些，你的组件就能动态更新、实时响应用户操作。这个Slide内容就到这里，我们下节课继续学习。