Aurelia：performance/efficiency 区别：在 repeat.for 中声明的视图元素与内联 DOM

Question

在repeat.for中这两个选项之间是否存在性能或效率差异：

选项 1：内联元素

<div repeat.for="row of data">
  <span>${row.title}</span>
  <span>${row.someData}</span>
</div>

选项 2：自定义视图元素

<view-element repeat.for="row of data" row.bind="row"></view-element>

其中视图元素是：

查看-element.js

import { bindable } from 'aurelia-framework';

export class ViewElement {
  @bindable row;
}

查看-element.html

<template>
  <div repeat.for="row of data">
    <span>${row.title}</span>
    <span>${row.someData}</span>
  </div>
</template>

如果视图元素包含很多绑定，会有不同吗？

Answer 1

拥有自定义元素肯定比没有自定义元素 "heavy weight" 更好，因为它在幕后引入了许多其他运行时机制，而这些机制仅通过普通绑定是不存在的。

这并不意味着它很慢或很重。就是说，相对于没有，会重一点。

Aurelia: performance/efficiency difference: declared view-elements vs inline DOM in repeat.for