LitElement 生命周期:首次渲染之前
LitElement lifecycle: before first render
有没有办法在组件的属性可用之后但在第一次渲染之前执行一个方法?
我的意思是介于 class contructor()
和 firstUpdated()
之间。
这听起来微不足道,也许事实上我遗漏了一些微不足道的东西..
元素的构造函数在创建元素时被调用,或者通过 HTML 解析器,或者例如通过 document.createElement
下一个回调是 connectedCallback
,当 DOM 节点连接到文档时调用。此时,您可以访问元素的光DOM。确保在执行您自己的工作之前调用 super.connectedCallback()
,因为 LitElement
实例在这里有一些工作要做。
下一个回调是 shouldUpdate
,这是一个可选的谓词,用于通知 LitElement 是否应该 运行 它的渲染周期。例如,如果您有一个观察到的 data
属性 并在 render
中解构它的深层属性,则很有用。我发现最好把这个当作一个谓词,不要往里面加各种生命周期逻辑。
之后,update
和render
被调用,然后是updated
和firstUpdated
。在 render
中执行副作用通常被认为是不好的做法,真正需要覆盖 update
的情况很少见。
在您的情况下,听起来很像您应该在 connectedCallback
中完成工作,除非您依赖 LitElement 的渲染阴影 DOM,在这种情况下,您可以考虑 运行在 firstUpdated
中设置您的代码,然后调用 this.requestUpdate()
强制进行第二次更新(或更改 firstUpdated
中观察到的一些 属性)
更多信息:https://lit-element.polymer-project.org/guide/lifecycle
有没有办法在组件的属性可用之后但在第一次渲染之前执行一个方法?
我的意思是介于 class contructor()
和 firstUpdated()
之间。
这听起来微不足道,也许事实上我遗漏了一些微不足道的东西..
元素的构造函数在创建元素时被调用,或者通过 HTML 解析器,或者例如通过 document.createElement
下一个回调是 connectedCallback
,当 DOM 节点连接到文档时调用。此时,您可以访问元素的光DOM。确保在执行您自己的工作之前调用 super.connectedCallback()
,因为 LitElement
实例在这里有一些工作要做。
下一个回调是 shouldUpdate
,这是一个可选的谓词,用于通知 LitElement 是否应该 运行 它的渲染周期。例如,如果您有一个观察到的 data
属性 并在 render
中解构它的深层属性,则很有用。我发现最好把这个当作一个谓词,不要往里面加各种生命周期逻辑。
之后,update
和render
被调用,然后是updated
和firstUpdated
。在 render
中执行副作用通常被认为是不好的做法,真正需要覆盖 update
的情况很少见。
在您的情况下,听起来很像您应该在 connectedCallback
中完成工作,除非您依赖 LitElement 的渲染阴影 DOM,在这种情况下,您可以考虑 运行在 firstUpdated
中设置您的代码,然后调用 this.requestUpdate()
强制进行第二次更新(或更改 firstUpdated
中观察到的一些 属性)
更多信息:https://lit-element.polymer-project.org/guide/lifecycle