在 connectedCallback 中自定义 Web 组件设置属性

问题描述

我在 Salesforce 堆栈上发布了一个类似的 question，其中上下文是 Lightning Web 组件（它只是 HTML Web 组件的扩展）。我在这里问是因为我想接触更广泛的受众。

在他们的文档中，他们说不建议在 connectedCallback() 挂钩中获取/设置自定义组件的属性。这里有没有人知道为什么会给出这个建议，因为我专门使用这个钩子来获取/设置属性。

解决方法

使用 connectedCallback 回调处理程序读取或设置属性没有问题。最初的指导方针与 props 可以在 connectedCallback 之后改变的事实有关，并且这个函数仅在组件附加到 DOM 树时执行。这意味着您的代码将无法正确处理反应性。

这本身不是技术限制；在处理 Web 组件时，它更像是良好的架构指南。

一般经验法则：

1. 一次性使用 connectedCallback，例如模板、设置观察（确保在 disconnectedCallback 中清理观察）。
2. 使用 getters 和 setters 来管理属性观察者。此外，不要在 setter 中处理异步工作流。示例 Promise.then() 等。这样做的原因是为了在 prop 更改时正确处理已经运行的请求的取消。因此最好使用在 connectedCallback 中设置的 observable。