NativeView перехватывает исключение: TypeError после возврата в приложение

Question

У меня есть функция внутри моего Component_1 :

methods: {

    interactBoxToggel () {

        let page = this.$refs.Home.nativeView;
        let interactBox = page.getViewById( 'interactBox' );

        console.log( interactBox );

    }

} , 

mounted () {
    bus.$on( 'interactBoxToggel' , this.interactBoxToggel )
}

Это всегда работает, если оно сработало изнутри Component_1 ,

Теперь я портирую его на Component_2 :

methods: {

    buttonCotrol( buttonName ) {

        bus.$emit( 'interactBoxToggel' );
        console.log(buttonName);

    }

}

Это тоже работает, но если я выхожу из приложения, «проведите пальцем, чтобы закрыть» ( Android 9 FullscreenЖест ) и снова вернитесь в приложение и вызовите его изнутри Component_2 , я получу ошибку:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onTouch failed
System.err: TypeError: Cannot read property 'nativeView' of undefined
System.err: 
...

Почему это происходит? Как я могу решить это?

Answer 1

Вы добавляете прослушиватель событий каждый раз при mounted обратном вызове. Когда приложение закрыто, компонент будет уничтожен и снова смонтирован при возобновлении, поэтому у вас будет 2 активных слушателя, но только один будет действителен для сеанса. Сколько бы раз вы ни закрывали и открывали, у вас будет столько же добавленных слушателей.

Вы должны удалить слушателя, когда он будет уничтожен.

    destroyed() {
        bus.$off("interactBoxToggel", this.interactBoxToggel);
    }