观察者在聚合物中的奇怪行为？答案

【问题标题】：Weird behaviour of observers in polymer?观察者在聚合物中的奇怪行为？
【发布时间】：2016-11-11 02:40:23
【问题描述】：

我有一个关于我的代码行为方式的问题列表，关于观察者

问题

1 - 为什么当我刷新页面时观察者会发出警报？

2 - 为什么我在刷新页面时会收到两次警报？

3 - 为什么警报中的值会有所不同，

a - 第一个警报 - [1,2,3,4,5]

b - 秒警报 - 1,2,3,4,5

4 - 除非手动更改某些内容，否则我不会调用观察者，我不希望在页面刷新时调用它

5 - ::input 做什么？

自定义元素

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="icon-toggle-second-demo">
  <template>
    <style>

    </style>
  <br>
    <input type="text" value="{{first::input}}" > 
      second element
    <button>Reset</button>
    {{first}}
      {{asdf}}

  </template>

  <script>
    Polymer({
      is: "icon-toggle-second-demo",
      properties: {
        'first': {
            type: Array,
            reflectToAttribute: true,
            value: "[1,2,3,4,5]"
        },
        'second': {
            type: String,
            notify: true,
            readOnly: false,
            value: "default"
        }
      },
        observers:[
            'changedEvent(first.*, 0)', 'con()'
        ],
        changedEvent: function(changeRecord, index){
            alert(changeRecord.base);
        },
        con: function(){
            console.log("asdf");
        }

    });
  </script>
</dom-module>

父 HTML

<!doctype html>
<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="icon-toggle-second-demo.html">
    <style is="custom-style">

    </style>
  </head>
  <body> 
      demo/index.html - parent <br>

   <icon-toggle-second-demo ></icon-toggle-second-demo>

      <script>
      </script>
  </body>
</html>

【问题讨论】：

标签： polymer polymer-1.0

【解决方案1】：

1 - 为什么当我刷新页面时观察者会发出警报？

当绑定观察者时，Polymer 将调用观察者，因为你已经为它提供了一些默认值。根据聚合物的文档

简单的观察者在属性第一次被定义（！=未定义）时被触发，之后的每一次更改，即使属性变得未定义。

2 - 为什么我在刷新页面时会收到两次警报？

这应该是因为当您要求 Polymer 将属性反映为属性时，它会尝试在属性和属性之间同步值。如果 Array/Object 作为属性中的值是不同的对象，则调用属性观察者中的值

3 - 为什么警报中的值会有所不同，

这是因为第一次它被解释为字符串（由您的 value 属性定义），第二次被解释为 Array（根据您的 type 属性）

4 - 除非手动更改某些内容，否则我不会调用观察者，否则我不希望在页面刷新时调用它

是的，有可能，您必须使用 simple observer 才能做到这一点

5 - ::input 有什么作用？

::input 帮助 Polymer 绑定 non-polymer 元素。由于非 Polymer 元素不会通知值何时发生变化，Polymer 使用此注释来标记需要观察的属性。

以下是我对您的代码的一些观察

为什么first 的类型是Array？您将如何从输入标签中获取数组。据我所知，输入标签只会给你字符串作为输入
你为什么使用reflectToAttribute。根据 Polymer 的文档，ReflectToAttribute 非常昂贵。因此，在您有理由使用之前，请避免使用它
您不需要将属性名称放在引号中。应该是 first 而不是 'first'
您已将 first 命名为 Array，但您已为其分配了 String 值。
您应该查看 Polymer 的文档或其他一些教程，以更好地了解如何使用 Polymer。

【讨论】：

首先，根据文档，输入属性可以具有这些值 - 类型：构造函数（布尔值、日期、数字、字符串、数组或对象之一）。我使用 reflectToAttribute 只是为了进行实验。问题 - 当 reflectToAttribute 为真时，警报被触发两次，否则一次。为什么？
是的，您的 type 值是有效的，但我要指出的是您的 type 和 value 属性不同步。 type 表示它的数组，value 表示它的字符串