CODEWITHSUNDEEP
polymerpolymer-1.0
Jiew Meng
Jiew Meng

Reputation: 88217

Polymer: Whats the difference between computed property and function like {{some(prop1)}}

Whats the difference between defining a computed property and using it like {{prop}}

prop: {
  type: String,
  computed: 'some(prop1)'
}

vs a function binding like

{{some(prop1)}}

Upvotes: 2

Views: 1318

Answers (1)

Tomasz Pluskiewicz
Tomasz Pluskiewicz

Reputation: 3662

The property is, as the name implies, also a property of the node object. It can notify outside listeners or reflect to attribute.

Function binding is only used to that. You can call it from the outside but it should have no effect - assuming that the function has no side-effects which is shouldn't.

The most important difference however, is that compute function will evaluate for each binding usage. Computed property will evaluate only once when a dependency changes. See below what happens in the console whenever you click INCREMENT.

Polymer({
  is: 'my-elem',
  properties: {
    i: {
      type: Number,
      value: 0
    },
    c: {
     computed: 'compute(i)' 
    }
  },
  inc: function() {
    console.clear();
    this.i += 1;
  },
  compute: function(i) {
    console.log('computing property binding');
    return i * 2;
  },
  f: function(i) {
    console.log('computing function binding');
    return i * 2;
  }
});
<!DOCTYPE html>
<html>
<head>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import"/>
  <link href="paper-button/paper-button.html" rel="import" />
</head>

<body>
  <my-elem></my-elem>
  
  <dom-module id="my-elem">
    <template>
      <div>Computed: [[c]]</div>
      <div>Computed: [[c]]</div>
      <div>Computed: [[c]]</div>
      <div>Computed: [[c]]</div>
      <div>Function: [[f(i)]]</div>
      <div>Function: [[f(i)]]</div>
      <div>Function: [[f(i)]]</div>
      <div>Function: [[f(i)]]</div>
      <paper-button on-tap="inc">Increment</paper-button>      
    </template>
  </dom-module>

</body>
</html>

Upvotes: 3

Related Questions