Nuxt3中替换嵌套对象时响应式失效如何解决？

问题场景与代码 #

在Nuxt页面中尝试替换从JSON文件读取的整个嵌套对象，代码如下：

import data1 from '~/static/file1.json';
import data2 from '~/static/file2.json';

export default {
    data(){
      return {
       elements:[],
      };
    },
    async mounted () {
      try {
        this.elements=data1;
      } catch (error) {
        console.error('Error loading data:', error);
      }
    },
    methods:{
      loadData(input){
        if (input=='data1'){
          this.elements=data2
        }
        else if (input=='data2'){
          this.elements=data1
        }
      },
    }
};

elements变量的数据在模板的多个组件中被访问，loadData()方法通过点击事件触发。出现的问题是：当在loadData()中完全替换elements对象时，若data2的键不同，前端会正常显示变更；但当键相同时，数据字典值的变更无法在前端呈现。

修复方案 #

这是Vue2响应式机制的特性导致的——基于Object.defineProperty实现的响应式系统，对已存在的同结构对象替换，可能无法检测到深层属性的变化。可以用以下几种方法解决：

方法一：使用this.$set强制触发响应式更新 #

通过this.$set直接更新变量，让Vue明确感知到数据变更：

methods:{
  loadData(input){
    const targetData = input === 'data1' ? data2 : data1;
    // 先清空原对象，再用$set赋值
    this.elements = {};
    this.$set(this, 'elements', targetData);
  },
}

方法二：创建新对象副本打破引用 #

通过生成新的对象副本，让Vue检测到引用地址的变化，从而触发视图更新：

methods:{
  loadData(input){
    const targetData = input === 'data1' ? data2 : data1;
    // 浅层嵌套用扩展运算符创建新对象
    this.elements = {...targetData};
    // 深层嵌套用JSON序列化反序列化生成独立副本
    // this.elements = JSON.parse(JSON.stringify(targetData));
  },
}

方法三：切换为Composition API（Nuxt3适用） #

如果是Nuxt3项目，改用ref声明响应式变量，替换时直接赋值即可自动触发更新：

import { ref, onMounted } from 'vue';
import data1 from '~/static/file1.json';
import data2 from '~/static/file2.json';

export default {
  setup() {
    const elements = ref([]);

    onMounted(() => {
      elements.value = data1;
    });

    const loadData = (input) => {
      elements.value = input === 'data1' ? data2 : data1;
    };

    return { elements, loadData };
  }
};

原因说明 #

Vue2的响应式系统通过Object.defineProperty为对象属性添加 getter/setter 来追踪变化。当你替换的对象与原对象键结构完全一致时，Vue可能无法识别到深层属性的数值变化；而创建新对象副本或使用$set，可以强制Vue重新建立响应式追踪，从而触发视图更新。

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