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

Question

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

在 MobX 中这很容易做到：

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

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

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

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

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.I 可以将创建的对象传递给 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

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

Vue 3 - Make the specific class properties reactive

vue.js

vuejs3

vue-reactivity