为什么要对类型对象的 Polymer 属性值使用函数包装？

Question

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

这是来自官方聚合物文档我的问题是为什么不在多个实例之间共享这个默认值因为这个默认值只会在初始化期间被调用一次??

    <dom-module id="title-element">
    <template>
        <h1 style$="background-color: {{backgroundColor}}">{{config.title}}</h1>
    </template>

    <script>
        Polymer({
            is: 'title-element',
            properties: {
                config: {
                    type: Object,
                    notify: true,
                    value: {
                        title: 'This is my element',
                    }
                },
                backgroundColor: String,
            },
            ready: function () {
                this.addEventListener('config-changed', function () {
                    console.log('config had changed');
                    this.querySelector('h1').style.backgroundColor = 'blue';
                })
            }
        })
    </script>
</dom-module>
<title-element background-color="yellow"></title-element>
<title-element background-color="green"></title-element>

在上面的示例中，我尝试通过在 chrome 控制台中选择该元素来更改 config.title 的值，并使用 [=12=].config = {"title":"any other"} 和 notifyPath 更改一次正如预期的那样，它只在选定元素中发生了变化，而不是所有实例

那么使用函数 wrap 的目的是什么？

Answer 1

这样每个元素都有自己的副本而不是共享。

If you provide a function, Polymer calls the function once per element instance.

When initializing a property to an object or array value, use a function to ensure that each element gets its own copy of the value, rather than having an object or array shared across all instances of the element.

这是 link 到 documentation

这里有一个简单的测试用例来描述相同的情况。

<link rel="import" href="http://polygit.org/components/polymer/polymer.html">
<dom-module id="shared-object">
  <template>
    <style></style>
    <div on-tap='changeValue'>Shared Object: {{shared.key}}</div>
    <div on-tap='changeValue'>Not Shared Object: {{notShared.key}}</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'shared-object',
    properties: {
      shared: {
        type: Object,
        value: {
          key: 'value'
        }
      },
      notShared: {
        type: Object,
        value: function() {
          return {
            key: 'value'
          }
        }
      }
    },
    changeValue: function() {
      this.set('shared.key', 'value1');
      this.set('notShared.key', 'value1');

    }
  })
</script>
Instance one
<br>
<shared-object id='obj1'></shared-object>
<br>
<br>Instance two
<br>
<shared-object id='obj2'></shared-object>
<script>
  document.querySelector('shared-object').addEventListener('tap', function() {
    console.log('First instance:\nshared value:', document.querySelector('#obj1').shared, '\nnot shared value:', document.querySelector('#obj1').notShared);
    console.log('second instance:\nshared value:', document.querySelector('#obj2').shared, '\nnot shared value:', document.querySelector('#obj2').notShared);
  })
</script>

点击任何值后，您会注意到即使所有情况下的显示值都是正确的，但在控制台中 shared 对象在两个实例中具有相同的值，而 notShared对象即使在控制台中也有不同的值。

为什么要对类型对象的 Polymer 属性值使用函数包装？

Why use function wrap for Polymer property value of type object?

polymer

polymer-1.0

为什么要对类型对象的 Polymer 属性 值使用函数包装？

Why use function wrap for Polymer property value of type object?

polymer

polymer-1.0

为什么要对类型对象的 Polymer 属性值使用函数包装？