为什么Polymer的计算属性需要显式属性参数？

Question

我正在挖掘Polymer 1.0元素,我对计算属性有点好奇.

例如,在paper-drawer-panel.html中,

<dom-module id="paper-drawer-panel" …>
  …
  <div id="main" style$="[[_computeDrawerStyle(drawerWidth)]]">
    …
  </div>
  …
</dom-module>
<script>
Polymer({
  is: 'paper-drawer-panel',
  …
  _computeDrawerStyle: function(drawerWidth) {
    return 'width:' + drawerWidth + ';';
  },
  …
</script>

drawerWidth是一个属性paper-drawer-panel,为什么将它显式包含在计算属性的参数中如此重要？

是

[[_computeDrawerStyle()]]

…

_computeDrawerStyle: function () {
  return 'width:' + this.drawerWidth + ';';
}

这是不好的做法吗？

Answer 1

计算绑定中的显式参数有一个重要目的:告诉Polymer计算绑定所依赖的属性.这允许Polymer知道何时重新计算和更新计算的绑定.

就拿[[_computeDrawerStyle()]],例如.在这种情况下,Polymer不知道计算绑定所依赖的其他属性,并且只会在加载时计算一次.

一旦你drawerWidth明确地添加([[_computeDrawerStyle(drawerWidth)]]),Polymer现在知道它应该在每次drawerWidth更改时再次为新值运行计算绑定.