property() method of function class in ember.js

Question

JavaScript

There are two examples of using function(){}.property() in the documentation
: Example 1:

MyApp.President = Ember.Object.extend({
  firstName: '',
  lastName:  '',

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');

    // Call this flag to mark the function as a property
  }.property()
});

var president = MyApp.President.create({
  firstName: "Barack",
  lastName: "Obama"
});

president.get('fullName');

and example 2:

MyApp.President = Ember.Object.extend({
  firstName: '',
  lastName:  '',

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');

    // Tell Ember.js that this computed property depends on firstName
    // and lastName
  }.property('firstName', 'lastName')
});

Question: what is the fundamental difference between them? The need for the second method is so vaguely described in the documentation that I can’t fully figure it out. A live example is missing.
Thank you very much Active.

Answer 1

Specific answer here .

Answer 2

It's clearly written there.

Many computed properties have dependencies on other properties. For example, in the above example, the fullName property depends on firstName and lastName to determine its value. You can tell Ember about these dependencies like this:

Answer 3

Let's take the first example.
If do:

var president = MyApp.President.create({
  firstName: "Barack",
  lastName: "Obama"
});

president.get('fullName');

Will return "Barach Obama"

president.set('firstName', 'George');
president.set('lastName', 'Washington');
president.get('fullName');

Again, it will return "Barach Obama", and if you specify the dependencies, everything will be OK.