Aurelia打印__observers__而不是对象

Question

我正在尝试将视图模型中的对象绑定到视图，如下所示：

// welcome.js
export class Welcome {

constructor() {
    this.data = {
        a: "",
        b: "",
        c: ""
    }
}

submit() {
       console.log(this.data);
    }
}


// welcome.html
<form role="form" submit.delegate="submit()">
    <div class="form-group">
      <textarea class="form-control" value.bind="data.a" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

理想情况下，它应该只打印data个对象。但是，它会在控制台中输出以下输出。

我想知道什么是observers对象，以及如何只访问data对象。谢谢。

Answer 1

简答：

__observers__对象使Aurelia的变更检测成为可能，你无法摆脱它。如果你真的需要精确地提取你想要的东西，那么你需要手工完成。

更深入一点

通常，当您在viewmodel上定义一些数据时，开发人员通常不介意明确设置属性，而是使用字段表示法，因为这更简洁。但是，字段只是字段，读取或分配时发生的事情不能改变 ¹ 。

每当通过任何方式绑定的属性（例如在模板插值（${ data.a }）或绑定（<input value.bind="data.a" />）等中使用它 - 发生变化时，Aurelia都需要一种存在方式通知是否以及何时更改值，以便它可以更新依赖于它的任何内容，例如视图的某些部分。

由于 ¹ ，如果将某些内容定义为字段，则无法实现。所以Aurelia所做的是它将类中的字段动态转换为属性，因为它们仍然允许x = 1符号（在处理字段时使用的内容），而不像Java风格的get-set 方法< / em>（setX(1)）让您的代码完全按照预期工作，但它们也可以在getter和setter中执行任意逻辑。当它将字段转换为属性时，它还会注入一些自己的逻辑，当值发生变化时，它会通知Aurelia。

这就是为什么这些东西被添加到你的对象中，这就是你无法摆脱它们的原因。它们对于使框架能够完成其工作是绝对必要的。

另一方面，当然，还有其他方法可以启用变更检测，但每种方法都有自己的怪癖。例如，在Angular中，这不是必需的，because what Angular does is it executes change checks whenever some asynchronous event occurs：

  

Angular在每个更改检测周期后执行模板表达式。更改检测周期由许多异步活动触发，例如promise promise，http results，timer events，keypresses和mouse moves。

当然，这会带来不同的复杂性，例如你需要不时地编写这样的代码来设置一些值：

setTimeout(() => this.someVal = 0, 0);

在我看来真是太烂了。

所以基本上有两种方法可以让框架在发生变化时得到通知。一个是Aurelia方式，另一个是Angular方式。

Aurelia的方式伴随着你所要求的后果，也就是说，它会为你的对象添加一些其他东西。

另一方面，Angular需要如上所述的hacky解决方案，人们也可能想知道在响应大多数异步事件时进行更改检查会对性能产生影响。

Answer 2

要获取普通对象，您可以使用克隆技术： console.log(JSON.parse(JSON.stringify(this.data)))