Vue3：创建的钩子与数据字段中的对象实例化

Question

I'm migrating a project from Vue2 to 3, and trying to understand an error that I get when creating a field on component data. Using ToneJS, I can create a new Synth() either in the body of a method, or in the created hook, and call it in my playNote method. However, when the synth is defined as a field on data , I get the error below when the "Play" button is clicked.

In Vue2 I had no problem like this. Wondering if someone can explain what is happening here? Why does the created hook work but not the data field?

Thanks for any help with this! The full text of the error:

runtime-core.esm-bundler.js?5c40:6568 [Vue warn]: Unhandled error during execution of native event handler at <Main onVnodeUnmounted=fn ref=Ref< Proxy {playNote: ƒ, …} > > at at warn @ runtime-core.esm-bundler.js?5c40:6568 logError @ runtime-core.esm-bundler.js?5c40:6742 handleError @ runtime-core.esm-bundler.js?5c40:6734 eval @ runtime-core.esm-bundler.js?5c40:6697 Promise.catch (async) callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6696 invoker @ runtime-dom.esm-bundler.js?830f:347 localhost/:1 Uncaught (in promise) DOMException

<template>    
<div>      
<button v-on:click="playNote">Play</button>    
</div>  
</template>   
<script lang="ts">  
import { defineComponent } from "vue";      
import * as Tone from 'tone'  

export default defineComponent({          
  name: "Main",          
  data() {              
    return {  
      synth: new Tone.Synth().toDestination(), // this throws an error 
      playing: false, 
    }
  },          
  methods: {              
    async playNote(){  
      console.log('playNote'); // logs properly await Tone.start();          
      console.log('this.synth', this.synth); // synth object logs        
      this.synth.triggerAttackRelease('C4', '8n');                   
    
      // this works:            
      // const synth = new Tone.Synth().toDestination();        
      // synth.triggerAttackRelease('C4', '8n');              
    },          
  },   
  created() {     
    // this.synth = new Tone.Synth().toDestination() // this also works   
  }    
});      
</script>

Answer 1

In Vue 3, Vue use Proxy to track changes from the object (Vue 2 use Object.defineProperty ).

When we return a plain JavaScript object from a component's data function, Vue will wrap that object in a Proxy with handlers for get and set.

From How Vue Tracks These Changes .

After debugging, I found that the error came from a file named get-native-context from standardized-audio-context package which will throw an error if it cannot find some context variable:

export const createGetNativeContext = (contextStore) => {
    return (context) => {
        const nativeContext = contextStore.get(context); // contextStore is a WeakMap
        if (nativeContext === undefined) {
            throw createInvalidStateError();
        }
        return (nativeContext);
    };
};

The original file is here .

So my guess is somewhere in the library store the Synth context object ( synth.context._context ) for later use. But the Synth context object has be changed to the Proxy. When it tries to get the context via contextStore.get(context) it will return undefined .

From your code:

created() {     
    this.synth = new Tone.Synth().toDestination()
}

This works because of this.synth is just a normal object not reactive (Proxy).

If you don't need the synth object to be reactive your code is fine both in method and created hook. But if you want it to be reactive you have to wrap it in some way.

For example:

...
  data() {
    return {
      synth: () => new Tone.Synth().toDestination()
    }
  },
  methods: {
    async playNote() {
      this.synth().triggerAttackRelease('C4', '8n')
    }
  }
...

This is not a good example as synth will create every time it's used. JSFiddle