javascript - LitElement connectedCallback() 与 firstUpdate()

Question

正如文档所说:

connectedCallback fires each time a custom element is appended into a document-connected element

还有:

firstUpdated fires after the first time your component has been updated and rendered

问题是我无法弄清楚它们之间的区别。那么区别是什么呢？我应该何时使用 connectedCallback 以及何时使用 firstUpdated 生命周期 Hook ？

Answer 1

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

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

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