vue 数组值没有变化，但可以用watch监听到。

Question

问题描述

vue 从接口取到数据，赋值给某个值，将这个值传给子组件，在子组件中监听该值变化，事实上数据没有改变，但watch一直在执行。请问这是为什么？该如何解决。

问题出现的环境背景及自己尝试过哪些方法

我尝试在接口返回结果时，用 json.stringify() 格式化结果，这个可以满足我的需求。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// 子组件
 watch: {
    foodData(val, oldval) {
      console.log(val, oldval)
    },
 },
 
 // 父组件
 async getData () {
     let res = await this.$store.dispatch('getFoodData');
     this.foodData = res; 
 },

Answer 1

this.foodData = res;

为foodData重新赋值，foodData是引用类型，引用是改变了的

Answer 2

加个判断，拿到值再赋值；

  let res = await this.$store.dispatch('getFoodData');
        if(res && res.xx){
             this.foodData = res; 
        }

Answer 3

在子组件监听中重新赋值，
watch: {

foodData (val) {
    this.food = val;
}

}