Recently, I encountered an issue while implementing a feature where markers should show callout labels when the map is zoomed to a certain level and hide them when the zoom level is lower. However, during my implementation, I noticed that manipulating marker data caused the map's zoom level to change unexpectedly, even without user interaction. This was perplexing. Let's dive into the problem.

Official mpVue Guidelines

The mpVue documentation includes some important warnings:

Events not listed can still be used by replacing "bind" with "@" on the DOM element. For instance, the @regionchange event has two types: "begin" and "end," which makes it difficult to distinguish between them in handleProxy. Therefore, it's necessary to listen for both the event name and type, like <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>.

If @regionchange isn't firing, this is likely the cause.

The Map Component as a Special Form Element

These guidelines don't directly address the issue I faced, so further analysis is needed. The map component supports various operations such as panning, zooming, and clicking. When users pan or zoom, the regionchange event is triggered. If you bind properties like scale, latitude, or longitude, as shown below:

<map 
 id="map" 
 :markers="markers" 
 :scale="scale"
 :latitude="latitude"
 :longitude="longitude"
 @callouttap="goToClass" 
 @end="regionchange"
 @begin="regionchange"
 @regionchange="regionchange"
 show-location 
 style="width: 100%; height: 100vh">

1. Binding these properties (scale, latitude, longitude)
2. User performs a zoom operation
3. Data manipulation occurs afterward

This combination leads to inconsistencies between mpVue and the小程序's data. When a user zooms or pans, the scale value updates, but the Vue instance doesn't reflect this change. Subsequent data operations may overwrite the updated scale, leading to unexpected zoom changes when modifying marker data.

To resolve this, you must manually update the Vue instance's data after zooming or panning to maintain synchronization. Think of the map component like an <input> element—@input updates the Vue instance's data, ensuring consistency. Similarly, the regionchange event should update the Vue instance's data:

methods: {
   regionchange: (e) => {
      this.ctx.getScale({// this.ctx is a reference to the MapContext object https://developers.weixin.qq.com/miniprogram/dev/api/map/MapContext.html
          success: (res) => {
              this.scale = res.scale
          }
      })
      this.ctx.getCenterLocation({
          success: (res) => {
              this.latitude = res.latitude
              this.longitude = res.longitude
          }
      })
   }
}

By updating the Vue instance's data within regionchange, you ansure consistency between the Vue state and the小程序's internal state.

mpVue's setData Design

When Taro 1.0 was released, it mentioned performance optimizations for setData:

A diff is performed before setData to find the minimal update path and use it for the update.

This is a key limitation of mpVue. Looking at its source code:

export function updateDataToMP () {
  const page = getPage(this)
  if (!page) {
    return
  }

  const data = formatVmData(this)
  throttleSetData(page.setData.bind(page), data)
}

Here, page.setData is called with all the data from the Vue instance, without checking which fields have actually changed. This lack of diffing contributes to the inconsistency between the Vue instance and the小程序's state.

Alternative Solution

In practice, using two-way binding might prevent the zoom level from resetting but can still cause flickering. An alternative approach is to stop binding scale, latitude, and longitude as reactive properties and instead use native API calls to update the map. Here's how:

            this.$mp.page.setData({
              '$root[0].latitude': data[0].latitude,
              '$root[0].longitude': data[0].longitude,
              '$root[0].scale': INIT_SCALE
            })

Use this.$mp.page to access the小程序's page instance and perform manual setData calls. Note that the template must still bind these values to ensure the WXML knows they are settable, eventhough they aren't defined in the Vue instance's data:

  <map 
  id="map" 
  :scale="scale"
  :latitude="latitude"
  :longitude="longitude">
  
  // In JS
  
  <script>
  export default{
  	data(){
		return {
           // Do not include scale, latitude, or longitude here
        }
	}
  }
  
  </script>

(End)