Fixed performance issue, when the icon was recreated too often.

Author: byWulf

examples/src/components/Icon.vue

@@ -35,17 +35,15 @@
       <!-- Create image icon (L.icon) from l-icon tag -->
       <l-marker :lat-lng="[47.413220, -1.199482]">
         <l-icon
-          :icon-size="[iconSize, iconSize*1.15]"
-          :icon-anchor="[iconSize/2, iconSize*1.15]"
-          temp-name="icon 1"
+          :icon-size="dynamicSize"
+          :icon-anchor="dynamicAnchor"
           icon-url="static/images/baseball-marker.png" />
       </l-marker>
 
       <!-- Create HTML icon (L.divIcon) by providing content inside the l-icon tag -->
       <l-marker :lat-lng="[47.413220, -1.189482]">
         <l-icon
-          :icon-anchor="[16, 37]"
-          temp-name="icon 2"
+          :icon-anchor="staticAnchor"
           class-name="someExtraClass">
           <div class="headline">{{ customText }}</div>
           <img src="static/images/layers.png">
@@ -80,10 +78,19 @@ export default {
         iconSize: [32, 37],
         iconAnchor: [16, 37]
       }),
+      staticAnchor: [16, 37],
       customText: 'Foobar',
       iconSize: 64
     };
   },
+  computed: {
+    dynamicSize () {
+      return [this.iconSize, this.iconSize * 1.15];
+    },
+    dynamicAnchor () {
+      return [this.iconSize / 2, this.iconSize * 1.15];
+    }
+  },
   methods: {
   }
 };

src/components/LIcon.vue

@@ -76,33 +76,32 @@ export default {
       type: Object,
       custom: true,
       default: () => ({})
-    },
-    // TODO: Remove tempName here (and from the example)
-    tempName: {
-      type: String,
-      custom: true,
-      default: null
     }
   },
 
   data () {
     return {
-      observer: null
+      parentContainer: null,
+      observer: null,
+      recreationNeeded: false,
+      swapHtmlNeeded: false
     };
   },
 
   mounted () {
+    this.parentContainer = findRealParent(this.$parent);
+
     propsBinder(this, null, this.$options.props);
 
     this.observer = new MutationObserver(() => {
-      this.createIcon('html slot');
+      this.scheduleHtmlSwap();
     });
     this.observer.observe(
       this.$el,
       { attributes: true, childList: true, characterData: true, subtree: true }
     );
 
-    this.createIcon('initial');
+    this.scheduleCreateIcon();
   },
 
   beforeDestroy () {
@@ -114,8 +113,30 @@ export default {
   },
 
   methods: {
-    createIcon (reason) {
-      console.log(Date.now() + ' - recreate ' + this.tempName + ' (' + reason + ')');
+    scheduleCreateIcon () {
+      this.recreationNeeded = true;
+
+      this.$nextTick(this.createIcon);
+    },
+
+    scheduleHtmlSwap () {
+      this.htmlSwapNeeded = true;
+
+      this.$nextTick(this.createIcon);
+    },
+
+    createIcon () {
+      // If only html of a divIcon changed, we can just replace the DOM without the need of recreating the whole icon
+      if (this.htmlSwapNeeded && !this.recreationNeeded && this.iconObject) {
+        this.parentContainer.mapObject.getElement().innerHTML = this.$el.innerHTML;
+
+        this.htmlSwapNeeded = false;
+        return;
+      }
+
+      if (!this.recreationNeeded) {
+        return;
+      }
 
       if (this.iconObject) {
         L.DomEvent.off(this.iconObject, this.$listeners);
@@ -145,44 +166,47 @@ export default {
 
       L.DomEvent.on(this.iconObject, this.$listeners);
 
-      this.parentContainer = findRealParent(this.$parent);
       this.parentContainer.mapObject.setIcon(this.iconObject);
+
+      this.recreationNeeded = false;
+      this.htmlSwapNeeded = false;
     },
+
     setIconUrl () {
-      this.createIcon('iconUrl');
+      this.scheduleCreateIcon();
     },
     setIconRetinaUrl () {
-      this.createIcon('iconRetinaUrl');
+      this.scheduleCreateIcon();
     },
     setIconSize () {
-      this.createIcon('iconSize');
+      this.scheduleCreateIcon();
     },
     setIconAnchor () {
-      this.createIcon('iconAnchor');
+      this.scheduleCreateIcon();
     },
     setPopupAnchor () {
-      this.createIcon('popupAnchor');
+      this.scheduleCreateIcon();
     },
     setTooltipAnchor () {
-      this.createIcon('tooltipAnchor');
+      this.scheduleCreateIcon();
     },
     setShadowUrl () {
-      this.createIcon('shadowUrl');
+      this.scheduleCreateIcon();
     },
     setShadowRetinaUrl () {
-      this.createIcon('shadowRetinaUrl');
+      this.scheduleCreateIcon();
     },
     setShadowAnchor () {
-      this.createIcon('shadowAnchor');
+      this.scheduleCreateIcon();
     },
     setBgPos () {
-      this.createIcon('bgPos');
+      this.scheduleCreateIcon();
     },
     setClassName () {
-      this.createIcon('className');
+      this.scheduleCreateIcon();
     },
     setHtml () {
-      this.createIcon('html');
+      this.scheduleCreateIcon();
     }
   },