不可观察的变化

Question

测试element.html

house:{ type: String, notify: true}

A.html

<test-element house="my-house"></test-element>

B.html

<test-element house="{{house}}"></test-element>
<div>{{house}}</div>

为什么<div>{{house}}</div>不是my-house？

Answer 1

这是因为test-element都是不同的实例。 A.html中的一个元素与B.html中的元素不同，即使它们具有相同的定义。

就javascript而言，您可以将其与声明两次调用相同函数进行比较：

function a(prop1) {
  console.log(prop1);
}

a(1) //logs 1
a() //logs undefined

或者如果你想将它与HTML进行比较，你可以举例说明任何元素（比方说输入）

<input id="ip1" value="test">
<input id="ip2">

现在，如果您检查ip2的值，它将不是test，因为它是一个新的实例化。同样的事情也发生在custom-elements上。

Answer 2

自定义元素不是单身！ Component的每个实例都有自己的上下文。如果您希望它的行为类似于单身，则需要实施redux或使用localStorage来存储信息