Ember Glimmer组件 #

一、Glimmer概述 #

Glimmer是Ember的高性能渲染引擎，Glimmer组件是Ember Octane的核心组件模型。

1.1 Glimmer优势 #

优势	说明
高性能	虚拟DOM优化
细粒度更新	只更新变化部分
简洁API	更少的样板代码
TypeScript	原生支持

1.2 与Classic组件对比 #

特性	Classic	Glimmer
基类	EmberObject	原生类
属性	computed()	@tracked
生命周期	多个钩子	constructor/willDestroy
参数	this.get()	this.args

二、组件签名 #

2.1 定义签名 #

typescript

interface MyComponentSignature {
  Args: {
    title: string;
    count?: number;
  };
  Blocks: {
    default: [item: Item];
  };
  Element: HTMLDivElement;
}

export default class MyComponent extends Component<MyComponentSignature> {
}

三、模板组件 #

3.1 仅模板组件 #

handlebars

{{! app/components/icon.hbs}}
<svg class="icon" ...attributes>
  <use xlink:href="/icons.svg#{{@name}}"></use>
</svg>

3.2 使用 #

handlebars

<Icon @name="user" class="large" />

四、总结 #

Glimmer组件要点：

概念	说明
签名	类型定义
Args	组件参数
Blocks	产出块
Element	根元素类型

Glimmer组件是Ember现代开发的推荐方式。