javascript - 观察实际上由 getter 派生的 "property"有什么细微差别？

Question

我正在使用 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 在每次调用时返回一个新值，那么尝试这种绑定(bind)将导致我的浏览器选项卡崩溃(这是 Chrome 39，所以我相信这是 native 对象观察的结果).

例如:

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

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

下面是问题的不同排列的更完整的概要:

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

请注意，顺便说一句，这个问题出现的频率可能比您想象的要高。如果从 getter 返回一个对象，很容易在每次访问时不小心创建一个新对象，例如:

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

Answer 1

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

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

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

理解崩溃的最后一部分是 changingValueChanged 访问 changingValue:

this.observedChangingValue = this.internalData.changingValue;

当访问该赋值的值时，您更改该值并导致监听器再次运行，这将永远重复。

您似乎无法有意义地观察到每次访问时总是不同的值。更不用说在知道该变量已更改后 try catch 该变量的值是没有意义的:该变量在功能上是一个生成器。你不能问变量它刚刚有什么值，因为它只能给你新的值。另一方面，您可以观察一个只是偶尔更改的基于 getter 的变量，因为它根据访问值的行为以外的其他因素更改其值。

如果您更改监听器以执行与变量无关的操作(例如，只需执行 console.log("hello"))并且永远不会访问 this.internalData.changingValue，没有死循环。请注意，新观察值位于提供给更改监听器的第一个参数中，因此您可以通过这种方式安全地获取值。然而，这并不是 Polymer 最终显示在页面上的值；似乎 Polymer 进行了另一次访问以读取值以将其放入 DOM。

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

我无法解释为什么 compute 属性会导致页面崩溃，因为我不知道那是做什么的。