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

Question

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

在 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 方法？

Answer 1

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

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