1

来自Lit 文档：“组件不应更改其自己的公共属性，除非响应用户输入。”

同样来自文档：“内部反应状态就像公共反应属性一样工作，除了没有与属性关联的属性。”

但是，当您声明一个属性时，有一个设置为 的选项attribute，false它可以防止属性与该属性关联。

@property({attribute: false})
data = {};

这样做的目的是什么？在那一点上，财产不会像内部状态一样吗？

作为参考，Lit 已经有几种声明内部状态变量的方法，无论是使用@state装饰器还是将state选项设置为true，所以我只是不确定他们为什么也允许这样做。

4

2 回答 2

0

我认为主要用例是当您必须将大型复杂数据传递给组件但希望将其直接设置为属性并且仍然点亮为您重新渲染内容时。

我认为这更容易用一个例子来可视化，假设你正在制作一个组件，它将从作为属性传递的数组中呈现一个列表。

如果数组被设置为一个属性，它看起来像这样：

<list-renderer items='[{id: "1", name: "John Doe"}, {id: "2", name: "Alice Williams"}]'></list-renderer>

现在，这个例子只有两个项目，但它可能更大，并且该属性最终需要使用JSON.parse()by lit序列化为一个数组。所以，你只是做了一个额外的步骤，特别是如果你已经将数组作为 JS 对象而不是 JSON 数据。

因此，对于这种情况，强制用户直接设置items为 JS 属性更容易。

当您需要将复杂的配置设置对象或功能传递给组件时，这也适用。

再说一次，对于您将要制作的大多数组件，您可能会坚持使用该属性或使其成为完全内部的状态属性。

于 2021-12-14T04:30:11.787 回答
0

这样您就可以真正自由地使用任何组合。

  • 一种同时充当状态和属性的属性
  • 也作为状态但不作为属性的属性
  • 一个状态，它不是一个属性
  • 一个属性，它是一个属性
  • 不是属性的属性

另请参阅https://javascript.info/dom-attributes-and-properties，了解属性和属性之间的区别。

于 2022-01-12T21:42:31.880 回答