quiet201 2021-12-17 11:28 采纳率: 100%
浏览 513
已结题

Vue3 setup中 watch不到对象的数据变化,不知道什么原因

问题遇到的现象和发生背景

Vue3 setup中 watch不到对象的数据变化

问题相关代码,请勿粘贴截图
**father.vue**

setup() {
 let testMsgObj = reactive({
    person1: {
     name: 'person1',
     age: 41,
    },

    person2: {
     name: 'person2',
     age: 42,
    },
 })
 
 let testMsg = testMsgObj.person1

 const handleSetLineChartData = () => {
    testMsg = testMsgObj.person2
    console.log(testMsg)
 }

    return {
      testMsg,
    }
}



**child.vue**

props: {
 testMsg: Object
},
setup(props) {
 let { testMsg } = props
 watch( () => testMsg, (val) => {
   console.log('testMsg---', val)
  },{ deep: true })
} 
运行结果及报错内容

无法看到 testMsg数据的变化

img

我的解答思路和尝试过的方法
我想要达到的结果

希望watch 可以监听 testMsg 变成peson2的数据 现在只看到 父级的组件 testMsg 改变了 watch并没打印出来 说明没监视到数据变化

  • 写回答

5条回答 默认 最新

  • 上官熊猫 2021-12-17 16:16
    关注

    需要注意两点:

    • 1.watch监听是响应式数据,原数据testMsg就不是响应式的,给testMsg加上ref就可以了;
    • 2.在获取props时不要使用解构。
    //父组件
    let testMsg = ref(testMsgObj.person1);
    const handleSetLineChartData = () => {
         testMsg.value = testMsgObj.person2;
       };
    
    //子组件
    watch(() => props.testMsg,(val) => {
            console.log("-----", val);
          },
          { deep: true }
        )
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 12月28日
  • 已采纳回答 12月20日
  • 创建了问题 12月17日

悬赏问题

  • ¥15 怎么改成循环输入删除(语言-c语言)
  • ¥15 安卓C读取/dev/fastpipe屏幕像素数据
  • ¥15 pyqt5tools安装失败
  • ¥15 mmdetection
  • ¥15 nginx代理报502的错误
  • ¥100 当AWR1843发送完设置的固定帧后,如何使其再发送第一次的帧
  • ¥15 图示五个参数的模型校正是用什么方法做出来的。如何建立其他模型
  • ¥100 描述一下元器件的基本功能,pcba板的基本原理
  • ¥15 STM32无法向设备写入固件
  • ¥15 使用ESP8266连接阿里云出现问题