如何在vue js中重用es6类？

Question

如何在Vue Js中重用一些现有的ES6类。

有一个类，该类的变量可以通过观察得到更新。

class A { 
    public a: string;
    someobservable.subscribe((a) =>{
         this.a = a;
    })
}

在vue.JS中创建了此类的对象。

示例如何使用属性：

created: {
    objA = new A();
}
methods: {
    getA() {
        if(this.objA !== undefined){
            return objA.a;
        }
    }
}

和在vue模板中：

<div>{{getA()}}</div>

模板中的值与类中变量的值不同步。

还有其他使用Vue模板的属性的方法，它可以实时更新。

Answer 1

它应该与getA()一起用作计算属性，而不是方法。另外，您可以跳过if语句，因为没有return语句将返回undefined。

computed: {
  getA() {
    return objA.a;
  }
}

Answer 2

您正在全局范围内创建实例。您需要在data字段中实例化对象，以便vue能够跟踪任何更改..

data: {
    objA: new A();
},

然后，您可以使用与..

一样的方法。

methods: {
    getA() {
       return this.objA.a;
    }
},

---

<div>{{getA()}}</div>

或者像其他人所说的那样使用计算属性。

computed: {
    getA() {
       return this.objA.a;
    }
}

---

<div>{{getA}}</div>

两者都具有相同的效果，但是最好使用计算属性来利用缓存。