javascript - 观察由 setter/getter 实际产生的“属性(property)”有什么细微差别？

我正在使用PolymerJS。

看起来像观察由getter派生的属性。

例如，以下代码似乎有效：

<div>Direct binding to property: {{internalData.value}}</div>
<div>Binding to computed value: {{computedValue}}</div>
<div>Binding to observed value: {{observedValue}}</div>

<script>
  var externalData = {
    get value() {
      return 'static value';
    }
  };

  Polymer('my-element', {
    internalData: externalData,
    computed: {
      computedValue: 'internalData.value'
    },
    observe: {
      'internalData.value': 'valueChanged'
    },
    valueChanged: function() {
      this.observedValue = this.internalData.value;
    }
  });
</script>

但是，如果我的getter定义更复杂的东西怎么办？我发现如果getter在每次调用时都返回一个新值，那么尝试这种绑定将导致我的浏览器选项卡崩溃（这是Chrome 39，因此我相信这是本机对象观察的结果）。

例如：

var externalData = {
  get changingValue() {
    return Math.random();
  }
}

为什么是这样？如果尝试这种模式，我还要担心什么？

这是问题的不同排列的更完整概要：

http://jsbin.com/reder/28/edit?html,output

顺便说一句，请注意，这个问题可能比您想象的更常见。如果从getter返回一个Object，很容易在每次访问中意外地创建一个新对象，例如：

var externalData = {
  get changingValue() {
    return { foo: 'bar' };
  }
}

最佳答案

还不是一个完整的答案，但他是一个开始：

考虑何时changingValueChanged运行。每次changingValue更改时它将运行。

考虑何时changingValue更改。每次访问它都会更改。

了解崩溃的最后一部分是changingValueChanged访问changingValue：

this.observedChangingValue = this.internalData.changingValue;

访问该分配的值时，您可以更改值并促使侦听器再次运行，这将永远重复。

看来您无法有意义地观察到每次访问都始终不同的值。更不用说在知道变量已更改之后尝试捕获该变量的值是没有意义的：该变量在功能上是生成器。您不能问变量刚刚具有什么值，因为它只能给您新的值。另一方面，您可以观察到基于getter的变量偶尔会发生变化，因为它基于访问值的行为以外的其他因素来更改其值。

如果您更改侦听器以执行与变量无关的操作（例如，简单地执行console.log("hello")）并且从不访问this.internalData.changingValue，则不会出现无限循环。请注意，新的观察值位于提供给更改侦听器的第一个参数中，因此您可以安全地以这种方式获取该值。但是，这不是Polymer最终在页面上显示的值。似乎Polymer可以再访问一次以读取该值并将其放入DOM。

但是，请注意，当您在控制台中访问externalData.changingValue时，更改监听器似乎没有运行，但是在访问externalData时，它确实运行了，后者显示了对象的所有属性。

我无法说说compute属性为什么会使页面崩溃，因为我不知道那是什么。