computed properties are marked as dirty on object change

controllers.application.js

import Ember from 'ember';
import changeGate from 'ember-computed-change-gate/change-gate';

/**
 * To have computed properties that only trigger on value
 * change you can use `ember-computed-change-gate`, it is
 * an Ember CLI addon.
 *
 * https://github.com/GavinJoyce/ember-computed-change-gate
 */

export default Ember.Controller.extend({
  
  foobar: 100,
  
  // computed typeof
  typeofCount: 0,
  typeof: Ember.computed('foobar', function() {
    this.incrementProperty('typeofCount');
    return typeof this.get('foobar');
  }),
 
  // depends on computed
  valueTypeofCount: 0,
  valueTypeof: Ember.computed('typeof', function() {
    this.incrementProperty('valueTypeofCount');
    /*
     * I might execute some expensive logic here
     * that could potentially impact severly the
     * performance of the app.
     */
    return this.get('typeof');
  }),
  
  // gated typeof
  changeGateCount: 0,
  changeGateTypeof: changeGate('typeof', function() {
    this.incrementProperty('changeGateCount');
    return this.get('typeof');
  }),
  
  // depends on gated computed
  dependsOnGatedPropCount: 0,
  dependsOnGatedProp: Ember.computed('changeGateTypeof', function() {
    this.incrementProperty('dependsOnGatedPropCount');
    /*
     * I might execute some expensive logic here, but
     * it only happens when it is really needed.
     */
    return this.get('changeGateTypeof');
  }),
  
  actions: {
    incrementFoobar: function() {
      this.incrementProperty('foobar');
    }
  }
  
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

td {
  text-align: right;
  border: 1px solid #000;
  width: 250px;
}

templates.application.hbs

<p><b>
  Computed properties are marked as dirty
  <br>
  on object change
</b></p>

<table>
  
  <thead>
    <td>
      computeds
    </td>
    <td>
      re-calc count
    </td>
  </thead>
  
  <tr>
    <td>
      computed typeof: {{typeof}}
    </td>
    <td>
      {{typeofCount}}
    </td>
  </tr>
  
  <tr>
    <td>
      deps on computed: {{valueTypeof}}
    </td>
    <td>
      {{valueTypeofCount}}
    </td>
  </tr>
  
  <tr>
    <br>
  </tr>
  
  <tr>
    <td>
      gated typeof: {{changeGateTypeof}}
    </td>
    <td>
      {{changeGateCount}}
    </td>
  </tr>
  
  <tr>
    <td>
      deps on gated computed: {{dependsOnGatedProp}}
    </td>
    <td>
      {{dependsOnGatedPropCount}}
    </td>
  </tr>
  
</table>
<br>
foobar: {{foobar}}
<button {{action "incrementFoobar"}}>
  increment foobar
</button>

<p>
A computed property that depends on a gated computed is notified of a change only if the returned value changed.
</p>

{{x}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-computed-change-gate": "1.0.0"
  }
}