如何在 Vue 的 data() 函数中使用外部对象？

Question

因此，在 Vue 组件中定义数据的标准方法是使用数据函数，如下例所示：

data()
{
    return {
        a:0
    }
}

我的问题是，我可以不在 return 之后定义数据对象，而是在其他地方定义数据对象，然后只在 data 函数中创建它的实例吗？

因此，例如：

内部 Vue 组件：

data()
{
    return new DataObject();
}

然后在 DataObject.js 中执行：

class DataObject
{
    constructor(a)
    {
        this._a = a;
    }
    get a()
    {
        return this._a;
    }
    set a(a)
    {
        if (a > 0)
        {
            this._a = a;
        }
        else
        {
            this._a = 0;
        }
    }
}

这不起作用。我创建了以下解决方法，使我能够执行此操作：

data()
{
    return {
        data: new DataObject();
    }
}

这按预期工作，但我仍然定义包装数据对象以便能够使用数据对象，我必须访问 a 作为 this.data.a 而不仅仅是 this.a.

那么，是否可以在 data 函数中不定义数据或包装数据对象，以我的方式实现它？

所以我希望能够从 data 函数 return 外部数据对象。

Answer 1

您没有为尝试创建的对象提供名称

return new DataObject();

尝试先在代码中的某处实例化 class，然后 return 它

let instance = new DataObject();

return instance;

Answer 2

可以在数据属性之外构造对象。 OP 代码的问题是 DataObject 的吸气剂。 vue 将用 reactive get/set 替换那些，删除底层变量的知识。

class SomeClass {
  constructor() {
    this.a = 'A';
    this.b = 'B';
    this.c = 'C';
  }
  // get a() will be overwritten
}

window.onload = () => {
  new Vue({
    el: '#app',
    data: function() {
      return new SomeClass()
    },
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h3>{{a}}</h3>
  <h3>{{b}}</h3>
  <h3>{{c}}</h3>
</div>

如何在 Vue 的 data() 函数中使用外部对象？

How to use external object in Vue's data() function?

javascript

vue.js

vue-component