Each key example

components.item-display.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  tagName: 'span',
  
  didInsertElement() {
    this._super(...arguments);
    this.logger.log(`${this.name} didInsertElement`, 'insert');
  },
  
  willDestroyElement() {
    this._super(...arguments);
    this.logger.log(`${this.name} willDestroyElement`, 'destroy');
  }
});

components.life-cycle-logger.js

import Component from '@ember/component';

function timeStamp() {
  let now = new Date();
  let m = now.getMinutes();
  let s = now.getSeconds();
  let ms = now.getMilliseconds();
  return `${m}:${s}.${ms}`;
}

export default Component.extend({
  tagName: '',
  
  init() {
    this._super(...arguments);
    this.set('logStack', []);
  },
  
  actions: {
    log(message, classname) {
      this.logStack.pushObject({ message: `${timeStamp()}: ${message}`, classname });
    }
  }
});

controllers.application.js

import Controller from '@ember/controller';
import { computed } from '@ember/object';
let uniqId = 1;

function uniqName(name) {
  return `${name}-${uniqId++}`;
}

export default Controller.extend({
  testArray: computed('originalArray.[]', function() {
    return this.originalArray.map((item) => {
      return Object.assign({}, item);
    });
  }),
  
  init() {
    this._super(...arguments);
    this.set('originalArray', [
      { name: uniqName('a'), value: 'A' },
      { name: uniqName('b'), value: 'B' },
      { name: uniqName('c'), value: 'B' }
    ]);
  },
  
  actions: {
    add(value) {
      this.originalArray.pushObject({ name: uniqName(value.toLowerCase()), value });
    },
    
    remove(name) {
      let obj = this.originalArray.findBy('name', name);
      this.originalArray.removeObject(obj);
    }
  }
});

styles.app.css

.columns {
  display: flex;
}

.log-item {
  padding: 0 5px;
  margin: 5px 0;
}

.log-item.insert {
  background-color: lightgreen;
}

.log-item.destroy {
  background-color: red;
}

.data {
  list-style: none;
  padding: 0;
}

.data-item {
  margin: 0;
  padding: 0 5px;
}

templates.application.hbs

<p>
  {{input value=this.addValue}}
  <button {{action "add" this.addValue}}>Add</button>
</p>

<div class="columns">
  <div class="column">

    <h2>No key (default)</h2>

    <LifeCycleLogger as |logger|>
      <ul class="data">
        {{#each this.testArray as |item|}}
        	<li class="data-item">
            <ItemDisplay @logger={{logger}} @name={{item.name}} @value={{item.value}} />
            <button {{action "remove" item.name}}>X</button>
          </li>
        {{/each}}
      </ul>

      <logger.output />
    </LifeCycleLogger>

  </div>

  <div class="column">

    <h2>key=name</h2>

    <LifeCycleLogger as |logger|>
      <ul class="data">
        {{#each this.testArray key="name" as |item|}}
          <li class="data-item">
            <ItemDisplay @logger={{logger}} @name={{item.name}} @value={{item.value}} />
            <button {{action "remove" item.name}}>X</button>
          </li>
        {{/each}}
      </ul>

      <logger.output />
    </LifeCycleLogger>

  </div>
</div>

templates.components.item-display.hbs

Name: {{@name}}, Value: {{@value}} ({{this.logString}})

templates.components.life-cycle-logger.hbs

{{yield (hash
  log=(action "log")
  output=(component "log-output" log=this.logStack)
)}}

templates.components.log-output.hbs

<ul class="log-output">
  {{#each @log as |item|}}
    <li class="log-item {{item.classname}}">{{item.message}}</li>
  {{else}}
    <li>Empty Log</li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}