Question

是否可能有一个组件只能被渲染/实例化一次，而其他组件可以使用同一实例？

我在项目中使用npm Google Maps library，我想拥有一个地图实例，而不必每次都渲染它，这会占用大量内存。

下面的代码作为组件的一部分显示了我只想实例化一次的对象：

private googleMap: google.maps.Map;

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

Answer 1

使用vuex store存储您的googleMap对象，并将对它的引用作为props传递给您的组件（推荐）。这样，您可以多次渲染组件，但是它们的googleMap道具将引用商店中的单个googleMap对象。

我认为在vuejs中不可能在应用程序的不同位置呈现单个组件。

Answer 2

一次实例化和一次渲染部件是两回事。

一次渲染组件是没有意义的。每当更改任何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'));

这两种方法都有优点和缺点，但通常应首选第一种方法。

VueJS-仅渲染一次组件

2 个答案: