使用 <compose view-model="./my-element"> 和 <my-element> 有什么区别？有哪些场景比较适合？

Question

过去四个月，我和一个队友一直在 Aurelia 中构建应用程序，他和我一直在以这两种不同的方式创建和使用组件。我想有一些一致性并将所有内容更改为两种样式中的一种，但我不知道哪种更适合或更适合我们的需要。

我选择使用 <compose> 因为对我来说它感觉更干净并且适合我遇到的每一个需求，但如果客观上使用自定义元素更好我想切换到那个。

例如：

(他的视图模型:)

import { bindable, bindingMode } from 'aurelia-framework';

export class HisWay {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}

(他的观点:)

<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>

（我的视图模型:)

export class MyWay {
  activate(model) {
    this.model = model;
  }
}

(我的看法:)

<compose view-model="./my-way" model.bind="myModel" containerless></compose>

我需要改过来吗？如果不需要，我可以用什么理由说服他使用我一直使用的相同样式？

Answer 1

我个人不会强迫自己只使用某种方法。大多数框架都试图让你相信只有一个成功的范式。但事实并非如此，因为每个项目，甚至在项目内部，每个需求都可能完全不同。

所以在考虑是使用自定义元素名还是compose来渲染组件时，首先要问问自己想要达到的设计目标是什么。我认为统一还不够。

只使用自定义元素方法很棒，因为它易于阅读，而且很容易上手有点静态页面结构。另一方面，如果您的页面需要大量动态组合，那么顾名思义，组合方法就是可行的方法。

所以我倾向于同意 compose 更好或者可以说更灵活，但同时也有点冗长。

反对 compose 的一个论点可能是使用自定义属性。例如。如果您使用 aurelia-i18n 并希望使用 attribute-translation 方法，您最好使用自定义元素语法。因此，正如您所看到的，它实际上是关于用例的。

编辑：

如果我们真的想深入了解细节，自定义元素方法的最佳论据是 compose 本身实际上是 nothing more than a custom element.

Answer 2

答案是否定的。对于提供的示例等情况，您无需切换。 Compose 元素（即组件）和自定义元素解决不同的问题。前者允许您将视图或视图和视图模型对组合到另一个视图中。默认行为根据名称匹配视图和视图模型，但我知道您实际上每次都可以绑定不同的视图模型（这可能会提供一些有趣的用途，比如 for 循环。）当我想分解更大的视图时，我使用组件成更易于管理的块。我还将在需要代码重用的地方使用它们，但我不希望从一种用途到另一种用途对其进行过多自定义，例如页脚、导航。

我理解的自定义元素基本上是 WebComponents，一种利用 Shadow DOM 的不断发展的 Web 标准。（您可以在下面的链接中阅读更多相关信息。）虽然相似，但它们比简单的组件和 IMO 具有更强大的重用能力。与组件不同，自定义元素可以具有一系列绑定属性，因此可以让您更好地控制它 当您在视图中使用它时 。你队友的例子并不能真正公正地对待他们。有人可能会争辩说，在那种情况下，组件会是更好的选择。

Answer 3

尽可能使用自定义元素方法。

Compose 目标是动态场景。如果您的 <compose> 元素的 view 和 view-model 属性值是静态的（非数据绑定），您可能应该使用自定义元素，原因如下所述。

可移植性：自定义元素的可移植性更高，因为它们具有更高的封装度。自定义元素的模板无法访问外部范围，所有数据必须通过 @bindable 属性传入。这与 <compose> 形成对比，它允许访问外部范围，这使得很容易变得马虎并对将使用组合视图的环境做出假设。

Features：自定义元素比 <compose> 元素具有更多的特性。模板 parts/slots（包含）、可绑定属性、通过 globalResources 实现 "globalize" 的能力等等。

重用：当小部件封装在自定义元素中并通过 globalResources 全球化时，团队重用小部件要容易得多。团队可以简单地编写 <mega-widget ...></mega-widget> 而不是必须记住 mega-widget.html 和 mega-widget.js 的相对路径并编写有效的 <compose view="..." view-model="..."></compose> 表达式。

更适合：您创建数据输入小部件的任何用例都值得使用自定义元素。使用货币自定义元素 - 例如：<currency value.bind="unitCost"></currency> 比尝试使用 <compose> 获得类似结果要容易得多。不确定您将如何真正完成它。

CSS：使用 css 选择器定位自定义元素比特定的组合元素实例更容易。 mega-element { display: block; ... }

https://www.danyow.net/aurelia-custom-element-vs-compose/

Answer 4

了解 compose 元素和自定义元素之间的另一个重要方面是调用的生命周期。

使用compose元素将调用导航生命周期的activate(params)，以及通常的组件生命周期（created、bind、attached、detached、unbind）。

这很有用，而且有细微差别。

使用 <compose view-model="./my-element"> 和 <my-element> 有什么区别？有哪些场景比较适合？

What are the differences between using <compose view-model="./my-element"> and <my-element>? What are some scenarios where one is more suitable?

javascript

aurelia

aurelia-templating

尽可能使用自定义元素方法。