Vaadin Flow：组件和元素的区别
Vaadin Flow: Difference between Component and Element
在 Vaadin Flow 中，除了组件之外，现在还有元素。
在元素的 javadoc 中说：
A Component is a higher level abstraction of an Element or a hierarchy of Elements.
这实际上意味着什么？在这个更高的层次上做了什么以及何时使用元素和何时使用组件？
作为实际示例，让我们考虑 HTML 标签 <input>。您可以创建服务器端 Element 实例，在浏览器中为您提供 <input> 作为 Element myElement = new Element("input").
此外，假设您要配置元素的占位符文本，例如<input placeholder="Enter your name here">。使用 Element API，这是 myElement.setAttribute("placeholder", "Enter your name here").
作为最后一个示例，您还添加了一个将值更改事件转发到服务器的侦听器。您还需要配置将浏览器事件的哪些部分发送到服务器并在侦听器中访问该值：myElement.addEventListener("change", event -> System.out.println("New value: " + event.getEventData("element.value")).addEventData("element.value");.
您可以用这种方式构建整个应用程序，但不方便。您希望 class 知道标签名称是 input 而无需每次都输入字符串。您需要 setPlaceholder 方法而不是使用通用 setAttribute 并记住属性的名称。最后，您需要一种添加值更改侦听器的方法，其中新值可用 event.getValue().
这正是 Component 进入画面的地方。它允许您创建一个扩展 Component 的 Input class 并为这些功能提供 Java API。在幕后，Input 组件将使用 Element API，但将其隐藏为 Input class 的用户不会知道的实现细节了解一下。
此外，一个组件也可以基于其他组件而不是直接使用Element。这通常是您创建组成组件的方式，例如在您的应用程序中的视图。
在 Vaadin Flow 中，除了组件之外，现在还有元素。
在元素的 javadoc 中说：
A Component is a higher level abstraction of an Element or a hierarchy of Elements.
这实际上意味着什么？在这个更高的层次上做了什么以及何时使用元素和何时使用组件？
作为实际示例，让我们考虑 HTML 标签 <input>。您可以创建服务器端 Element 实例，在浏览器中为您提供 <input> 作为 Element myElement = new Element("input").
此外，假设您要配置元素的占位符文本，例如<input placeholder="Enter your name here">。使用 Element API，这是 myElement.setAttribute("placeholder", "Enter your name here").
作为最后一个示例，您还添加了一个将值更改事件转发到服务器的侦听器。您还需要配置将浏览器事件的哪些部分发送到服务器并在侦听器中访问该值：myElement.addEventListener("change", event -> System.out.println("New value: " + event.getEventData("element.value")).addEventData("element.value");.
您可以用这种方式构建整个应用程序，但不方便。您希望 class 知道标签名称是 input 而无需每次都输入字符串。您需要 setPlaceholder 方法而不是使用通用 setAttribute 并记住属性的名称。最后，您需要一种添加值更改侦听器的方法，其中新值可用 event.getValue().
这正是 Component 进入画面的地方。它允许您创建一个扩展 Component 的 Input class 并为这些功能提供 Java API。在幕后，Input 组件将使用 Element API，但将其隐藏为 Input class 的用户不会知道的实现细节了解一下。
此外，一个组件也可以基于其他组件而不是直接使用Element。这通常是您创建组成组件的方式，例如在您的应用程序中的视图。