Fields, Properties, and Attributes — Overview

同学们好，今天我们来聊聊 LWC 里几个特别基础，但又很容易混淆的概念——字段、属性，还有它们背后的反应性系统。咱们慢慢来，把它讲透。 首先，假设你正在写一个 Lightning Web 组件，需要在画面上动态显示一些文字，比如一段欢迎语。这时候你会在组件的 JavaScript 类里面声明一个变量，我们管它叫“字段”，比如 `message = 'Hello'`。然后在模板里用花括号 `{message}` 引用它，页面就会显示“Hello”。当你用代码修改 `this.message = 'Hi'` 时，神奇的事情发生了——画面自动更新成“Hi”。这就是 LWC 的反应性系统在工作，它会追踪字段的值，一旦变化就去更新界面。 那么，“字段”和“属性”又是什么关系呢？从写组件的人（组件作者）的角度看，你在类里声明的变量就叫字段。但这个类的实例一旦生成，实例上的这些变量就变成了属性。对于使用你组件的人（消费者）来说，他们只看得见那些被你用 `@api` 装饰过的字段，这些字段摇身一变成了公开的“属性”，允许父组件传值或者外部读取。可以这么说：内部声明叫字段，对外暴露叫属性。只有加了 `@api` 的字段，才会作为对象的属性提供给消费者使用，组件内部没加 `@api` 的字段是私有的，外面碰不到。 记住，反应性系统不光看公开属性，内部字段的值变了，它也会重新渲染模板，让组件始终保持最新的样子。 接下来还要澄清一对容易犯晕的概念——HTML 里的“属性”和 JavaScript 里的“属性”。你可能会两处都听到“属性”这两个字，但其实在英文里它们分别是 attribute 和 property。举个简单的例子，一个 `