Reactivity for Fields, Objects, and Arrays

同学们，今天我们来聊一聊 Lightning Web Components 里一个非常核心的概念——反应性。简单说，反应性就是让界面上的数据跟 JavaScript 变量保持同步，这样一来，你改了变量，界面就自动更新，不需要手动去操作 DOM。 那 LWC 是怎么知道数据变了呢？它默认用的是“浅层”跟踪。什么意思？就是它只检查你在给一个字段赋值的时候，用等号去比较新旧值是不是同一个引用。 这就带来一个问题。对于数字、字符串这种“原始值”，你每次给它们赋一个新值，自然就创建了一个新引用，所以 LWC 能检测到变化，界面就刷新。 但对象和数组就不是这样了。比如你有一个对象 `person = {name: '张三'}`，如果你只改里面的属性，比如 `person.name = '李四'`，对象本身的引用没变，LWC 就察觉不到，界面就不会更新。同样，往数组里 push 一个新元素，数组引用也没变，界面也不会动。 那怎么办呢？老师给你两个办法。 第一种，最简单粗暴：你直接创建一个全新的对象或数组，然后赋值给这个字段。比如 `person = {...person, name: '李四'}`，或者 `arr = [...arr, newItem]`。这样就改变了引用，LWC 就能捕获到。 第二种，你也可以用 `@track` 装饰器。把它加在属性前面，就告诉 LWC：“这个属性深层次的内部变化，我也要跟踪。” 这样你直接修改 `person.name` 或者 `arr.push()`，界面都能跟着更新。不过要注意，`@track` 只跟踪一层内部属性，更深层的嵌套它不是完全递归观察的，但它会帮你跟踪普通对象和数组的内部变化。 好了，记住这两点，你就能轻松驾驭 LWC 的数据响应了。