Observe an Array's Elements — @track for Arrays

好，我们接着看数组在Lightning Web Components里的反应机制。它跟对象的逻辑基本一致，但你得注意几个关键点。 首先，如果你没用 `@track` 装饰器，只有当你把一个全新的数组赋值给属性时，框架才会触发重新渲染。比如直接写 `this.arr = [1, 2, 3]`，就会更新视图。但是，如果你通过索引去改某个元素，像 `this.arr[0] = 'x'`，或者用 `push` 这类会改变原数组的方法，框架是察觉不到的，因为数组的引用没变，所以页面不会刷新。 那加上 `@track` 呢？这时候框架就会观察数组内部元素的变化了。你直接给某个索引赋值，或者用 `push`、`pop` 这些变异方法，它都能检测到，并安排重新渲染。 不过这里有个容易忽略的小细节：即使 `@track` 能检测到单个元素变了，框架并不会自动把数组转换成字符串来显示。假如你在模板里直接写 `{myArray}`，它显示的可能是 `[object Array]`，而不是内容。所以，你通常得写一个 getter，比如叫 `formattedArray`，在里面调用数组的 `join` 方法，或者其他序列化方式，然后把 getter 用在模板里。这样的话，当 `@track` 发现元素有改动，就会重新计算 getter，模板就会显示出更新后的字符串。 总结一下：用 `@track` 可以追踪数组内部变化，但要正确显示内容，记得用 getter 做序列化。不用 `@track` 就只认整个数组的替换。这样讲清楚了吗？