为什么Vue组件的center2属性在第二次打开时没有更新？

你遇到的是Vue框架常见的响应式更新与组件生命周期问题，控制台能打印出正确值说明属性实际已修改，未同步到视图/打开组件恢复默认值的常见原因如下：

• Vue 2.x版本的响应式限制：Vue 2通过Object.defineProperty劫持对象属性实现响应式，直接修改嵌套对象的属性时，部分场景下无法触发视图重渲染。
• 组件被<keep-alive>缓存：开启缓存后组件首次加载后不会重新执行data()初始化，如果你在activated生命周期钩子中写了重置center2为默认值的逻辑，你的位置更新操作如果早于该钩子执行，就会被重置逻辑覆盖，导致每次打开都显示默认值。
• 侦听器重复注册：如果位置侦听器只在组件首次初始化时注册，组件销毁时未移除，后续打开组件会重复注册侦听器，更新的是已销毁旧组件实例的center2属性，新实例的属性未被更新，自然显示默认值。

// 优先推荐：替换整个对象触发响应式更新，适配所有Vue版本
this.center2 = {
  lat: Number(location.latitude),
  lng: Number(location.longitude)
}

// Vue2 也可以使用$set方法修改属性
// this.$set(this.center2, 'lat', Number(location.latitude))
// this.$set(this.center2, 'lng', Number(location.longitude))

如果使用了组件缓存：

• 检查activated钩子逻辑，删除重置center2的代码，或者将位置更新逻辑移到activated钩子之后执行。
• 不需要缓存的组件可以配置keep-alive的exclude属性排除当前组件，每次打开都会重新初始化data。
  如果是侦听器重复注册：
• 在beforeDestroy（Vue2）/beforeUnmount（Vue3）钩子中移除位置侦听器，避免重复绑定。

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