VueJS - 只渲染一次組件

Question

是否有可能擁有一個只會被渲染/實例化一次的組件，並且其他組件可以使用相同的實例？

我在我的項目中使用npm Google Maps 庫，我想要一個地圖實例，而不是每次都渲染它，這會占用大量內存。

下面的代碼顯示了我只想實例化一次的對象，作為組件的一部分：

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對象，並將對它的引用作為道具傳遞給您的組件（推薦）。 這樣，您可以多次渲染您的組件，但他們的googleMap道具將引用您在商店中的單個googleMap對象。

我認為在 vuejs 中不可能在您的應用程序的不同位置呈現單個組件。