Rerender an Object with New Properties — Selective Tracking

同学们，今天我们来聊聊 Lightning Web Components 里一个很有意思的优化机制，叫“选择性跟踪”。即使你在属性上加了 `@track`，框架也不是傻傻地、一有风吹草动就重新渲染，而是非常聪明地记住了：上一次渲染的时候，到底用了哪些具体的属性。 举个简单的例子，假设我们的组件里有一个对象 `obj`，只有两个字段，`value1` 和 `value2`。在第一次渲染时，我们的模板里只用了 `obj.value1`，根本没碰 `value2`。这时候，LWC 的框架就会记录下：“嗯，这次渲染用到的关键数据是 `value1`。” 好，那接下来如果我们在 JavaScript 里，只把 `obj.value1` 改成另一个值，框架一比对，发现记录里的 `value1` 变了，那自然而然就会触发重新渲染，界面更新。 但是，如果我们只是给 `obj` 新增一个属性 `value2`，或者修改 `value2` 的值，而不去动 `value1`，那框架就会想：“你这次改的 `value2`，上次我压根儿没用到它来画界面啊，改它不会影响已经显示的内容，那我就不用费力气重新渲染了。” 所以，这种情况下，界面是不会更新的。 那假如我们确实需要两个值都生效，让界面重新渲染呢？这时候，就不能只新增属性，而是要直接给它一个全新的对象，里面同时包含新的 `value1` 和 `value2`。比如 `obj = { value1: newValue1, value2: newValue2 }` 这样整体替换。这样一来，框架检测到 `obj` 本身的引用变了，而且新对象里的 `value1` 也变了，就会妥妥地触发重新渲染。 这样做的好处是什么呢？就是防止不必要的重新渲染，大大提高我们组件的性能。框架只关心真正影响界面的数据变化，这就是 LWC 选择性跟踪的聪明之处。