vuejs3 - vue3：如何使外部对象的一个​​属性具有反应性？

Question

长期以来，我一直在寻找一个优雅的解决方案来解决这个问题。

MyClass.js

class MyClass {
  // public 
  isReady = false
  isLoading = false
  isProcessing = false

  // private
  __source
  __buffer
  #otherPrivateVar
  // a lot of other stuff ...
}

我只想使一些实例属性具有反应性并在组件中使用它们。

在Vue2我使用私有类属性

MyClass
  // few public vars
  isReady = false

  // all other is private to hide it from vue reactivity
  #source
  #buffer
}

并在这样的组件中使用它

<template>
  ...
   <div v-if="myVariable.isReady">Ready to go</div>
   <div>wait a second ...</div>
  ...
</template>

export default {
  // ...
  data () {
    return {
      myVariable: new MyClass()
    }
  }
  // ...
}

我不确定这是否是一个好的解决方案，但它适用于Vue2。在Vue3 中我不能这样做，因为它使用了代理并且我得到了错误：

AudioFile.js:131 TypeError: attempted to set private field on non-instance
    at _classPrivateFieldSet (classPrivateFieldSet.js:7)

那么当我的对象在 Vue 3 中发生变化时（不使用回调或使整个对象在没有私有属性的情况下具有响应性）时，最好的反应方式是什么？

标签： vuejs3vue-reactivity