将数据传递给 Vue 子组件而无需重新安装它

Question

I have a page that includes some audio visualization that's being done within a component. The component is only for displaying stuff, the audio logic is done in the parent. I'll keep this part short, since my problem is more general, but basically I'm passing the AnalyserNode to the child to poll the realtime frequency analysis from within my Three.js render-loop in the child (WorkletModule).

So in my parent I have something like this:

<template>
    ...
    <WorkletModule
      :analyser="analyser"
      :key="componentKey"
    />
    ...
</template>

...

data() {
    return {
      componentKey: 0,
      analyser: null,
    };

methods: {
     startRecording() {
      this.componentKey++
      ..

      this.analyser = audioContext.createAnalyser();
      ..
     }
}

while my WorkletModule.vue looks like this:

  props: {
    analyser: {
      type: AnalyserNode
    },
  },

  mounted() {
      //initialize graphics, etc..
  }

//in the render loop I need to do something like this:
this.analyser.getByteFrequencyData(soundData);

Now if I use it like above, it does actually work, however, every call to startRecording() causes the WorkletModule to re-mount, creating a hick-up and emptying the canvas of the WorkletModule.

If I remove the ":key="componentKey" it doesn't get updated, which means that the reference to the analyzer in the WorkletModule/prop always stays null, which is obviously not what I want. Is there a way to pass the analyzer object in another form than a prop?

Basically I need the analyzer value in every frame of the render-loop. I could not pass it as a prop but rather emit an event from the render loop of the WorkletModule that in turn gets the parent to send the current values back to the child via another event. That doesn't seem like a very elegant thing though, so I guess there's a better way.

Answer 1

I'm really puzzled by this:

If I remove the ":key="componentKey" it doesn't get updated, which means that the reference to the analyser in the WorkletModule/prop always stays null

This is not supposed to happen since props are updated without re-rendering by default. Of course, if you use a key, the component is fully destroyed and recreated on every key update.

You could listen to your props update by using a watcher.

In the example below, I pass a prop to a children component, from null to a number. The component is only rendered once and the prop is updated as expected. I only added a watcher to track every update of the said prop and give me the possibility to add any logic from that. You could try to do that in order to understand if the prop is really never updated or maybe your implementation lacks something (and you didn't show us the malicious bit of code that drives you into thinking it's not updated).

 const test = Vue.component("test", { props: ["prop1"], methods: { getProp() { console.log(this.prop1); } }, created() { console.log("created"); // only called once setInterval(this.getProp, 2000); }, watch: { prop1(newVal, oldVal) { console.log("watcher:", newVal, oldVal); // do something } }, template: "<div>test</div>" }); new Vue({ el: "#app", components: { test }, data: { toProp: null }, methods: { setProp() { this.toProp = new Date().valueOf(); } }, created() { setInterval(this.setProp, 6000); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <test :prop1="toProp" /> </div>