Ember 3.15 "Octane"发布：原生ES类、装饰器和新的Glimmer组件API ...

Ember 3.15 发布了，此项目包含的 Ember.js, Ember Data 和 Ember CLI 也均已更新。除了常规的引入新功能和 bugfix，Ember 3.15 还标志了 Octane edition 的正式发布，这也是 Ember 的首个 edition release。

Edition 是 Ember 在 RFC #364 - Ember 2018 Roadmap 中引入的概念。一个版本（edition）代表了一个统一的编程模型，而发布新的 edition 则代表了由于 Ember 添加了新功能和新概念而导致编程模型的转变。Ember Octane 正是 Ember 的首个 edition。

Ember 3.15 "Octane" 带来了更多现代化的功能，诸如原生 ES 类、装饰器、新的 Glimmer 组件 API，以及一种称为“跟踪属性（tracked properties）”新的状态管理方法。结合起来，这些对 Ember 的创新性改变不仅仅是新的工具和 API，Octane 的特性共同构成了 Ember 应用程序构建方式的范式转变。

此版本值得关注的改进：

• 引入 Glimmer 组件

旧版本使用组件的方式

import Component from '@ember/component';

export default Component.extend({
  tagName: 'p',
  classNames: ["tooltip"],
  classNameBindings: ["isEnabled:enabled", "isActive:active"],
})

新版本使用 Glimmer 组件

<p class="tooltip {{if @isEnabled 'enabled'}} {{if @isActive 'active'}}">
  {{yield}}
</p>

亦即意味着我们可以创建一个没有根元素的组件

<p>{{yield}}</p>
<hr>

 

• 针对 Ember 组件模型引入元素修饰符，此功能使开发者可以构建未连接到任何特定组件的可重用 DOM 行为

• Glimmer Reactivity

下面是 Ember 3.14 指南中的计算属性示例：

import EmberObject, { computed } from '@ember/object';

const Person = EmberObject.extend({
  firstName: null,
  lastName: null,
  age: null,
  country: null,

  fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  }),

  description: computed('fullName', 'age', 'country', function() {
    return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`;
  })
});

let captainAmerica = Person.create({
  firstName: 'Steve',
  lastName: 'Rogers',
  age: 80,
  country: 'USA'
});

captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA"
captainAmerica.set('firstName', 'Steven');
captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

新版本中的跟踪属性（Tracked Properties）

class Person {
  @tracked firstName;
  @tracked lastName;
  @tracked age;
  @tracked country;

  constructor({ firstName, lastName, age, country }) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.country = country;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }),

  get description() {
    return `${this.fullName}; Age: ${this.age}; Country: ${this.country}`;
  })
}

let captainAmerica = new Person({
  firstName: 'Steve',
  lastName: 'Rogers',
  age: 80,
  country: 'USA'
});

captainAmerica.description; // "Steve Rogers; Age: 80; Country: USA"
captainAmerica.firstName = "Steven";
captainAmerica.description; // "Steven Rogers; Age: 80; Country: USA"

详细更新请点此查看：https://blog.emberjs.com/2019/12/20/octane-is-here.html