Vue: Обнаружение переключения динамического c компонента - PullRequest
Новая
       43

Vue: Обнаружение переключения динамического c компонента

0 голосов
/ 17 июня 2020

У меня есть интерфейс с вкладками в Vue, где на одной из этих вкладок есть элемент холста, который обновляется каждый кадр. Вкладка windows реализована с использованием <component :is="curComponent" />

Я не хочу, чтобы этот элемент холста обновлялся каждый кадр, если пользователь не находится на вкладке, которая требует этого, поэтому мне было интересно, есть ли какие-либо как определить, когда переключается элемент <component />? Похоже, что метод destroyed() вообще не запускается.

Изменить: вот код. Даже когда вкладка переключена на «уничтожено», она никогда не выводится в окно консоли, что заставляет меня думать, что компонент никогда не уничтожается. 

//in EditorWindow
<template>
    <div>
        <component :is="currentEditor" />
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
import LevelEditor from './editor_level/LevelMain';
import ArtEditor from './editor_art/ArtMain';
import LogicEditor from './editor_logic/LogicMain';

export default {
    name: 'EditorWindow',
    components: {
        LevelEditor
    },
    computed: {
        ...mapGetters(['selectedTab']),
        currentEditor(){
            switch(this.selectedTab){
                case 'level':
                    return LevelEditor;
                case 'art':
                    return ArtEditor;
                case 'logic':
                    return LogicEditor;
                default:
                    return LevelEditor;
            }
        }
    }
}
</script>

//in ArtEditor Component
import {mapGetters} from 'vuex';
import artCanvas from './artCanvasScript';

export default {
    name: "ArtCanvas",
    data() {
        return {
            canvasEl: null
        }
    },
    mounted(){
        this.resize();
        this.setup();
    },
    computed: {
        ...mapGetters(['selectedTab'])
    },
    methods:{
        resize(event = null){
            let wrapper = this.$refs.artCanvas;
            let canvas = this.$refs.canvas;
            canvas.width = wrapper.clientWidth;
            canvas.height = wrapper.clientHeight;
        },
        setup(){
            this.canvasEl = new artCanvas(this.$refs.canvas);
            this.canvasEl.setup();
            window.requestAnimationFrame(()=>{this.update()});
        },
        update(){
            this.resize();
            if (this.selectedTab == "art"){
                this.canvasEl.update();
                window.requestAnimationFrame(()=>{this.update()});
            }
        },
        beforeDestroy(){
            console.log("beforeDestroy")
        },
        destroyed(){
            this.canvasEl = null;
        }
    }
}

также я абсолютно разбит, так что завтра когда я постараюсь прояснить это

...