如何在安装后使物体产生反应？

Posted 2021-03-19

我有一个组件，在安装后（无法在安装前完成），该组件与服务交互以创建然后接收非反应性对象。任何想法如何使该对象具有反应性？

Google搜索和vue文档搜索使我无所事事。

@Component
export default class Curve extends Vue {

  chunks: Chunk<string>;

  async mounted(){ 
    let service = new ChunkManager<string>(interval, this.sampler, etc...);
    this.chunks = this.manager._chunk;
 };
};    

和块类：

export class Chunk<T>{
    id = 'testID';
    constructor(){};
    valid = false;
    toRender: T;
};

答案：

贷给Macintosh_89。这是一个格式化的答案，表明将属性设置为null可以将其变为反应性，即使将其设置为非反应性对象也是如此。

@Component
export default class Curve extends Vue {

  chunk1 = null; 
  chunk2 = undefined;

  async mounted(){ 

     this.$watch('chunk1', () => console.log('chunk1 changed'),
           {immediate: false, deep: true});
     this.$watch('chunk2', () => console.log('chunk2 changed'),
           {immediate: false, deep: true});

     let exampleObj = = {
        name: 'bob',
        age: 111
     };

     this.chunk1 = bob;
     this.chunk2 = bob;
     console.log(chunk1, chunk2);
  };
};  

答案

好的，我会尽力而为。也许这就是您想要的。我不知道您的对象如何更新。我假设这是可能的工作方式。请原谅格式

  <template>
    <div>{{ reactiveChunk }} </div>  
    </template>    

   data :() => ({
            chunks:null
              }),
   mounted ():{
             this.serviceCall() // from methods
               }
   watch:{
            reactiveChunk: function(){
            return this.chunks //assuming this gets updated routinely
           },
   method:{
             serviceCall :function() {
             let data = servicecall_to_API(params)
             this.chunks = data  
         }