Vue 3 - 使特定的类属性具有反应性

如何解决Vue 3 - 使特定的类属性具有反应性

是否有可能使类实例的某些属性具有反应性？

在 MobX 中很容易做到：

class Doubler {
    constructor(value) {
        makeObservable(this,{
            value: observable,double: computed,})
        this.value = value
    }

    get double() {
        return this.value * 2
    }
}

但在 Vue 中似乎不可能做到。

1.我得到的最接近的结果是以下结果：

class Doubler {
    constructor(value) {
        this.value = ref(value)
        this.double = computed(() => this.value.value * 2) // Ugly
    }
}

计算出来的代码很丑，而且它的使用也不同：

const doubler = new Doubler(1)
double.value = 2 // No way!
double.value.value = 2 // That's it! Ugly,but that's it.

2.我可以将创建的对象传递给 reactive 函数，但它使所有属性都是响应式的，并且不会影响内部实现，它仍然会很丑。 >

有没有办法在 Vue 中重现 MobX 方法？

解决方法

我不认为你可以通过类来实现它。不过对于对象，我能想到的最接近的事情是这样的：

function createDoubler(value) {
  const doubler = reactive({ value })
  doubler.double = computed(() => state.value * 2)
  return doubler
}

const doubler = createDoubler(4)
doubler.value // 4
doubler.value = 5
doubler.double // 10

编辑：再想一想后，我想出了以下解决方案：

class Doubler {
  constructor(value) {
    this._state = reactive({ value });
  }

  get value() {
    return this._state.value;
  }

  set value(value) {
    return this._state.value = value;
  }

  get double() {
    return this._state.value * 2;
  }
}

如果您想使用 ref 而不是 reactive：

class Doubler {
  constructor(value) {
    this._value = ref(value);
  }

  get value() {
    return unref(this._value);
  }

  set value(value) {
    return this._value = value;
  }

  get double() {
    return this.value * 2;
  }
}

Link to CodeSandbox