Polymer：计算属性和函数 {{some(prop1)}} 有什么区别

Question

定义计算属性和像 {{prop}}

一样使用它有什么区别

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

与像

这样的函数绑定

{{some(prop1)}}

Answer 1

属性顾名思义，也是节点对象的一个属性。它可以 notify outside listeners or reflect to attribute.

函数绑定仅用于此。您可以从外部调用它，但它应该没有效果 - 假设该函数没有副作用，这是不应该的。

然而，最重要的区别是计算函数将针对每个绑定使用进行评估。 Computed 属性将仅在依赖项更改时评估一次。看看下面当你点击 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>

Polymer：计算属性和函数 {{some(prop1)}} 有什么区别

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

polymer

polymer-1.0

Polymer：计算 属性 和函数 {{some(prop1)}} 有什么区别

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

polymer

polymer-1.0

Polymer：计算属性和函数 {{some(prop1)}} 有什么区别