Complex Objects — The Clone Pattern

今天我们来看一个在LWC里非常重要的模式，叫克隆模式。你可能会问，为什么我们需要它呢？简单说，它就是用来强制让复杂的对象重新渲染的通用办法。 我们先理解一下本质的问题。LWC是怎么知道数据变了，需要更新界面呢？它是通过“引用比较”来做的，也就是说，它看的是内存地址有没有变，相当于用三个等号来对比。所以，就算你把对象或数组里面的值改了，如果内存引用还是原来那个，LWC就认为没变化，画面就不更新。 那怎么办呢？关键就是：我们必须改变引用。克隆模式就是围绕这个想法来的，做起来其实就三步，跟切菜一样简单。第一步，把现有对象克隆出一份全新的；第二步，在这个克隆出来的副本上随便修改；第三步，把修改好的副本赋值回原来的字段。这样子，引用就变了，LWC马上就知道要去重新渲染了。 举个具体的例子，比如说你有一个日期类型的数据。如果你直接改它的内部字段，LWC是察觉不到的。正确做法是，像这样写：new Date(this.x.getTime()) ，这样就拿到一个全新的日期对象，值一样但引用不同。对于集合类型，Set就写 new Set(oldSet) ，Map就写 new Map(oldMap)。数组呢，用扩展运算符非常方便，就像这样： [...原数组, 新元素] ，这会产生一个新数组。普通对象也一样，用大括号扩展，像这样： { ...旧对象, 新属性 } 。这样每次赋值都是全新的引用。 有一个常见的疑惑：我有没有用@track？其实这个模式，不管你有没有标@track都有效。因为默认的浅反应性，永远能检测到引用的变化。所以哪怕你不用装饰器，只要按克隆模式改了引用，刷新就肯定会发生。 最后给你个小技巧：浏览器控制台其实是你的好朋友。如果你运行的时候看到它警告说这是个“不可跟踪对象”，那意思就是，你现在正试图直接观察一个复杂对象的内部变化，而LWC做不到。这时候，就该立刻想起咱们今天讲的克隆模式，用三步走，问题就迎刃而解了。