组件响应属性变化的一种方式是根据新值和已有属性值来计算派生值。

willUpdate() 回调是在 Lit 中执行这些计算的理想位置。它在更新周期开始时、组件渲染之前被调用，因此你在 willUpdate() 中计算的任何属性都可以在 render() 方法中使用。

willUpdate() 回调接收一个已更改属性的映射作为参数，其中键是属性名，值是每个已更改属性的旧值。

如果你计算的值仅用于渲染，且计算成本很低，你可以在 render() 方法本身中进行计算。然而，如果属性计算成本较高，最好在 willUpdate() 中计算，并且仅在计算的输入发生变化时才进行计算。在 willUpdate() 中计算的值应存储为元素上的属性。这样该值就可以在 render() 中使用，也可以在事件监听器中使用，或者作为元素公共 API 的一部分。

在这个示例中，组件有两个字符串属性 forward 和 backward。用户可以更新其中任意一个，组件需要判断用户更新了哪个属性，并更新另一个属性。

添加 willUpdate() 回调：

  willUpdate(changedProperties: PropertyValues<this>) {
    if (changedProperties.has('forward')) {
      this.backward = this.forward.split('').reverse().join('');
    }

    if (changedProperties.has('backward')) {
      this.forward = this.backward.split('').reverse().join('');
    }
  }

  willUpdate(changedProperties) {
    if (changedProperties.has('forward')) {
      this.backward = this.forward.split('').reverse().join('');
    }

    if (changedProperties.has('backward')) {
      this.forward = this.backward.split('').reverse().join('');
    }
  }

在更新周期回调（如 willUpdate() 或 render()）中更新响应式属性不会触发新的更新周期。在 willUpdate() 中设置 backward 或 forward 会使新值在 render() 中可用，但不会触发另一次更新！