Question

定义计算属性与使用{{prop}}

之间的区别是什么

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

与像

这样的函数绑定

{{some(prop1)}}

Answer 1

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

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

然而，最重要的区别是计算函数将评估每个绑定用法。当依赖项更改时，计算属性将仅评估一次。请参阅下面的内容，只要您单击 INCREMENT ，控制台中会发生什么。

＆＃13;

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;
  }
});

＆＃13;

<!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>

＆＃13;

Polymer：像{{some（prop1）}}这样的计算属性和函数之间的区别是什么

1 个答案: