在Vue.js中如何正确监听包含经纬度的嵌套对象属性变化？

原有代码问题说明 #

1. 监听回调中的this.center2.lat = newValue属于冗余操作，newValue本身就是属性更新后的最新值，重复赋值会循环触发watch，导致逻辑异常
2. 若需要初始化时就触发回调，需要补充immediate: true配置

实现方案 #

方案1：单独监听单个属性（性能最优） #

适合只需要分别处理经纬度变化的场景，Vue2选项式API写法如下：

watch: {
  "center2.lat": {
    handler(newValue) {
      // 此处编写纬度更新后的业务逻辑
      console.log("最新纬度：", newValue)
    },
    immediate: true // 若无需初始化触发可删除该配置
  },
  "center2.lng": {
    handler(newValue) {
      // 此处编写经度更新后的业务逻辑
      console.log("最新经度：", newValue)
    },
    immediate: true
  }
}

方案2：深度监听整个对象 #

适合需要同时获取经纬度变化的场景，开启deep配置即可检测对象内部所有属性的变化：

watch: {
  center2: {
    handler(newCenter) {
      const { lat, lng } = newCenter
      // 此处编写经纬度更新后的业务逻辑
      console.log("最新经纬度：", lat, lng)
    },
    deep: true, // 深度监听必填配置
    immediate: true
  }
}

Vue3组合式API写法 #

如果使用Vue3，可以按以下方式实现：

import { ref, watch } from 'vue'

// 定义经纬度对象
const center2 = ref({ lat: 0, lng: 0 })

// 方式1：单独监听纬度
watch(() => center2.value.lat, (newLat) => {
  console.log("最新纬度：", newLat)
})

// 方式2：深度监听整个经纬度对象
watch(center2, (newCenter) => {
  console.log("最新经纬度：", newCenter.lat, newCenter.lng)
}, { deep: true })

内容的提问来源于stack exchange，提问作者Swift Solutions