VueJS - визуализировать компонент только один раз

Question

Возможно ли иметь компонент, который будет отображаться / создаваться только один раз, и тот же экземпляр может использоваться другими компонентами?

Я использую библиотеку Google Maps npm в моем проекте, и я хочу иметь один экземпляр карты вместо того, чтобы отображать его каждый раз, который использует много памяти.

В приведенном ниже коде показан объект, которым я бы хотел бытьсоздается только один раз, как часть компонента:

private googleMap: google.maps.Map;

    mounted() {
        this.googleMap = new google.maps.Map(document.getElementById('map'), myMap.options);
    }

Answer 1

Один экземпляр компонента и Один компонент рендеринга - это две разные вещи.

Один компонент рендеринга один раз не имеет смысла думать.Функция рендеринга всегда будет вызываться всякий раз, когда изменяется любое свойство prop или instance.

Создание экземпляра компонента после является очень распространенным сценарием.Такие компоненты, как «закусочная», диалоговое окно, оповещатели часто создаются один раз.

Чтобы создать один экземпляр компонента, есть две вещи, которые вы можете сделать.Во-первых, сделайте этот компонент дочерним для корневого экземпляра или где-нибудь наверху иерархии компонентов, например:

// Root Instance Template
<app-component>
    <header></header>
    <router-view></router-view>
    <google-map></google-map>
</app-component>

Следующий вариант - вручную создать экземпляр этого экземпляра и смонтировать его вместе с корневым экземпляром Vue.Затем внедрите этот компонент в иерархию приложений.Вы можете сделать что-то вроде:

const mapComp = new Vue({ name: 'google-map' })
    .$mount(document.querySelector('.map'));

// Pass mapComp to rootInstance which can then inject into children component.
const rootInstance = new Vue({ /* options */, mapComp })
    .$mount(document.querySelector('.app'));

Есть плюсы и минусы обоих подходов, но, как правило, первый подход должен быть предпочтительным.

Answer 2

используйте vuex store , чтобы сохранить объект googleMap и передать ссылку на него компоненту как props (рекомендуется).таким образом, вы можете визуализировать ваш компонент несколько раз, но их googleMap опора будет ссылаться на ваш единственный googleMap объект в магазине.

Я не думаю, что в vuejs возможно отобразить один компонент вразные места в вашем приложении.