在上一步中，你添加了一个可以通过特性设置的 dateStr 属性，但组件的 date 属性仍然通过 JavaScript 设置。要求用户使用 JavaScript 来设置属性对于 <date-display> 的使用者来说并不理想，因为这种方式不如设置特性那样易读和简便。

在这一步中，你将添加代码，使 date 属性在 dateStr 发生变化时与之同步。

接受 `date-str` 特性

Permalink to "接受 date-str 特性"

移除 index.html 中的 <script> 标签。
将 05/05/22 传递给 date-display 的 date-str 特性。

index.html

Permalink to "index.html"

<body>
  <date-display date-str="05/05/22"></date-display>
</body>

现在你可能会注意到显示的日期与传入的日期不同。这是因为 date 属性正在被渲染。date 需要在 dateStr 变化时与之同步。

在 `dateStr` 变化时更新 `date`

Permalink to "在 dateStr 变化时更新 date"

每次变化时，将 dateStr 值转换为 JavaScript Date 对象。
更新 date 属性以反映用户定义的日期，以便可以显示它。

willUpdate 方法是协调两个不同响应式属性的好地方。

有关更多信息，请参阅 Lit 生命周期！

date-display.

Permalink to "date-display."

export class DateDisplay extends LitElement {
  ...

  willUpdate(changed: PropertyValues<this>) {
    if (changed.has('dateStr') && this.dateStr) {
      this.date = new Date(this.dateStr);
    }
  }

  ...

export class DateDisplay extends LitElement {
  ...

  willUpdate(changed) {
    if (changed.has('dateStr') && this.dateStr) {
      this.date = new Date(this.dateStr);
    }
  }

  ...

现在当 date-str 特性变化时，应该能正确显示日期了！

添加 dateStr 属性和在 willUpdate() 中编写命令式代码是可行的，但并不理想。我们不建议在你自己的代码中使用这种模式。相反，你应该使用自定义特性转换器，正如接下来的步骤所示。