如何在第一个组件加载时获取加载的引用数组

Question

我在更新 vue 3 项目中的反应式对象时遇到一些问题，我正在创建一个 google.maps.marker.AdvancedMarkerElement 数组，我正在创建这样的数组 ->

localizaciones.forEach((localizacion) => {
        if (localizacion.agrupaciones) localizacion.agrupacionesF = localizacion.agrupaciones.split(",");
        const glyphSvgPinElement = new PinElement();
        const glyphImg = document.createElement("img");
        glyphImg.src = usingIconsStore.setIcon(localizacion.icono);
        glyphSvgPinElement.glyph = glyphImg;
        const advancedMarker = new AdvancedMarkerElement({
            position: {
                lat: localizacion.lat!,
                lng: localizacion.lng!
            },
            content: glyphSvgPinElement.element,
            title: localizacion.agrupacionesF![0]
        });
        advancedMarker.setAttribute("agrupacionesArr", localizacion.agrupaciones);
        advancedMarker.setAttribute("id", String(localizacion.id));
        advancedMarker.setAttribute("icono", String(localizacion.icono));
        marcadores.value.marcadores.push(advancedMarker);
        google.maps.event.addListener(advancedMarker, "click", async function () {
            infoFichaHelper.value = { marcador: advancedMarker, sugerencia: await pedirDetalleEstacion(props.tipoMapa, localizacion.id) }
        });
    });

其中 marcadores 是一个这样声明的变量：

let marcadores = ref<google.maps.marker.AdvancedMarkerElement[]>([])

然后在第一次加载我的组件来过滤这个数组以获取最喜欢的数组这个数组是空的有没有办法在第一次加载时为这个反应数组充电？

Answer 1

是的，您可以使用 Vue 3 中的 watch 函数来监视 localizaciones 数组的更改，并相应地更新 marcadores 数组。这是一个例子：

import { ref, watch } from 'vue';

// ...

const marcadores = ref([]);

watch(
  () => localizaciones,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      marcadores.value = [];
      newVal.forEach((localizacion) => {
        // ...
      });
    }
  },
);

在此示例中，我们使用 watch 函数来监视** localizaciones 数组的更改。当 localizaciones 数组发生变化时，marcadores 数组也会相应更新。 watch 函数采用一个 watcher 函数和一个可选的选项对象。在本例中，我们使用一个观察器函数，它获取 localizaciones 数组的新值和旧值，并相应地更新 marcadores 数组。