Дочерний компонент Glimmer не выполняет рендеринг, когда родительский объект передает ему другой аргумент

Question

Чтобы быть более явным, дочерний компонент создает свойство, которое зависит от аргумента, передаваемого родительским компонентом. Я не использую родительский аргумент непосредственно в дочернем шаблоне (этот случай работает просто отлично).

Исходя из фона React, моя ментальная модель предполагает, что новые аргументы, передаваемые компоненту, будут вызывать повторную визуализацию. Но я знаю, что Glimmer делает вещи по-другому с его @tracked декоратор.

Хорошо, вот надуманный пример. Для демонстрации отправляйтесь на игровую площадку Glimmer.

// parent-template.hbs
<button onclick={{action doubleNumber}}>Double Number</button>
<div>
  Parent - {{number}}
</div>

<Child @number={{number}} />

// parent-component.ts
import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  @tracked number = 2;

  doubleNumber() {
    this.number = this.number * 2;
  }
}

// child-template.ts
<div>
  Child will render double of parent {{doubleOfParent}}
</div>

// child-component.ts
import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  get doubleOfParent () {
    return 2 * this.args.number;
  }
};

Здесь родитель отображает удвоенное число при каждом нажатии кнопки. Но ребенок никогда не перерисовывает?

Мой вопрос в том, нужно ли нам всегда иметь tracked переменная внутри шаблона. В этом случае number, И выразить дочерний шаблон, как это

<div>
  Child will render double of parent {{double @number}}
</div>

Вот double является помощником, который удваивает число.

Если это так, то в чем причина наличия tracked свойства / аргумент в шаблоне?

Answer 1

Похоже, ваш doubleOfParent() метод отсутствует @tracked аннотации, так как его выход зависит от args имущество:

import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  @tracked('args')
  get doubleOfParent() {
    return 2 * this.args.number;
  }
};

Вы можете найти более подробную информацию по этой теме на https://glimmerjs.com/guides/tracked-properties