Manage Attribute Dependencies — Overview

好，我们接着看下一个知识点，叫做属性依赖关系。这个听起来有点绕，但其实就是一个小陷阱，不注意的话，你写的代码可能会出现莫名其妙的bug。 想象这样一个场景：你有一个子组件，父组件一口气给它传了两个属性，比如一个叫“行数据”，一个叫“是否选中”。你可能会在子组件里写两个setter，分别是“行数据”的设置器和“是否选中”的设置器。然后你以为，父组件传值的时候，一定是按你写的顺序先设置行数据，再设置是否选中。 但事实上，Lightning Web Components 的框架并不保证这个顺序。它可能是先给你“是否选中”，再给你“行数据”。这样一来，如果你在“是否选中”的设置器里立刻想去用行数据做一些操作，那行数据可能还没到，你就会拿到undefined，程序就出错了。 这个问题的根源在于，你不能假设JavaScript属性被赋值的顺序。那怎么解决呢？很简单，用一个“懒评估”的模式。你把依赖多个属性的逻辑写在一个getter里，而不是写在setter里。在这个getter里，你先检查一下，所有需要的数据是不是都已经到了。如果没到全，就直接返回，什么也不做。一旦所有数据都齐了，你再执行你真正想做的逻辑。 这样不管父组件先传哪个属性，后传哪个属性，你的代码只会在所有东西都准备好的时候才真正跑起来。这就是所谓的“惰性评估”，它保证了你的逻辑执行时，依赖的数据肯定已经在了。 记住了，属性赋值顺序不可靠，用getter做懒加载检查，这就是今天的小技巧。