笔记:vue中监听对象,出现新值和旧值一样问题及解决方法

        出现场景:父组件传一个对象给子组件，父组件中改变该对象的属性值，在子组件中监听该对象变化，结果子组件监听后的新值和旧值一样

        父组件:data中定义一个params对象，里面有一个参数(其他参数无用删除了),通过点击事件改变该值，

//dom
<child :queryParams="params" > </child>

// js
data(){
    return {
      params:{
        // 搜索flag
        flag:false
      }
    }
  }

    // 自定义查询
    queryByCustom(){
      this.params.flag=!this.params.flag
    }

        子组件:监听该对象变化,输出新值和旧值，会发现两个对象的参数值一摸一样；

props: {
   queryParams:Object
}

      // 监听查询参数变化
      queryParams:{
        handler(nVal,oVal){
            console.log(nVal,oVal)  
        },
        deep:true,
        immediate:true
      }

原因：是浅拷贝导致，对象在浏览器内存中以引用方式保存，监听值改变后，指针的名字变了，但指向的仍然是同一片堆内存

解决方法:借助computed属性，在父组件的computed中深拷贝一个新对象，子组件监听该对象即可解决问题

父组件:

//dom
<child :queryParams="params_computed" > </child>

  computed: {
    params_computed() {
      let that=this;
      // 浅拷贝->深拷贝
      return JSON.parse(JSON.stringify(that.params))
    }
  },