Vue项目中Leaflet组件ref访问API失败：invalidateSize报错排查

场景复现 #

已在Vue项目中成功加载Leaflet地图，核心代码如下：

<div style="height:70vh; width:100%; position: relative;">
  <l-map ref="map" :zoom="maps_obj.zoom" :center="[maps_obj.latitude, maps_obj.longitude]">
    <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"></l-tile-layer>
  </l-map>
</div>

<script>
import 'leaflet/dist/leaflet.css';
import { defineComponent, ref } from 'vue';
import {
  LMap, LMarker, LTileLayer, LIcon,
} from '@vue-leaflet/vue-leaflet';
import { icon } from 'leaflet';

methods: {
  test() {
    this.$nextTick(() => {
      this.$refs.map.mapObject.invalidateSize();
    });
  },
},
</script>

地图渲染正常，但调用test()方法时出现错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'invalidateSize')

原因分析与解决方案 #

1. 版本适配混淆 #

你使用的是适配Vue3的@vue-leaflet/vue-leaflet，但参考的是vue2-leaflet的文档。虽然两者获取Leaflet实例的核心逻辑一致，但Vue3的写法需注意ref绑定时机与校验。

2. 调用时机过早 #

如果在组件挂载完成前调用test()，this.$refs.map还未绑定到LMap组件实例，自然无法访问mapObject。

3. 缺少空值校验 #

直接访问this.$refs.map.mapObject未做空值判断，一旦ref未初始化就会触发报错。

修正后的代码示例 #

选项式API写法（Vue3 + defineComponent）

<template>
  <div style="height:70vh; width:100%; position: relative;">
    <l-map ref="map" :zoom="maps_obj.zoom" :center="[maps_obj.latitude, maps_obj.longitude]">
      <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import 'leaflet/dist/leaflet.css';
import { defineComponent } from 'vue';
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';

export default defineComponent({
  components: { LMap, LTileLayer },
  data() {
    return {
      maps_obj: {
        zoom: 10,
        latitude: 39.9042,
        longitude: 116.4074
      }
    };
  },
  methods: {
    test() {
      this.$nextTick(() => {
        // 增加空值判断，避免ref未绑定时报错
        if (this.$refs.map) {
          this.$refs.map.mapObject.invalidateSize();
        }
      });
    }
  },
  mounted() {
    // 在组件挂载完成后调用方法，确保ref已绑定
    this.test();
  }
});
</script>

组合式API写法（Vue3 +