LitElement connectedCallback() 与 firstUpdate()

Question

正如文档所说：

每次将自定义元素附加到文档连接元素时都会触发 connectedCallback

还：

firstUpdated 在您的组件第一次更新和呈现后触发

问题是我无法弄清楚它们之间的区别。那么区别是什么呢？当我应该使用connectedCallback，当firstUpdated生命周期挂钩？

Answer 1

“更新”是一个 LitElement 生命周期阶段，它以批量和异步方式发生，在属性更改、元素被创建或被requestUpdate()调用之后。LitElement 在更新期间执行渲染。updated()并且firstUpdated()是在更新后调用的生命周期回调。firstUpdated()只被调用一次，它旨在用于进行一次依赖于更新/渲染的设置——比如查询重要元素的影子根。

connectedCallback()每次将元素连接到文档时都会调用它，并由浏览器同步调用。如果一个元素被断开连接并重新连接，它可能会被多次连接。因为connectedCallback()是同步调用，它可能在第一次更新/渲染之前被调用，并且元素可能没有一些依赖渲染的任务所需的状态。

我会使用构造函数和firstUpdated()大多数一次性设置工作，以及connectedCallback()依赖于元素所在树结构的工作 - 比如触发事件以连接到父级和祖先。