vue3 监听响应式数据变化问题？

作者站长头像
站长
· 阅读数 7

用vue3很久了但是今天偶然遇到一个问题：定义了一个响应式对象， 对象的某个属性的值 是另外一个 响应式数据 现象：属性值的响应式数据发生改变 外层无法检测到对象变化 代码如下

let giao = reactive({
  aa: orderStore.longShortFlag,
})

watch(
  () => giao.aa,
  newVal => {
    console.log(newVal)
  },
  { deep: true, immediate: true },
)

上面对象属性aa的值 orderStore.longShortFlag 是一个响应式数据 通过watch可知这个 orderStore.longShortFlag 确实是发生变化的实时。单外层giao这个对象却监听不到变化 ！ 请问这是什么原因呢！

回复
1个回答
avatar
test
2024-06-30

这是因为在Vue 3中，响应式对象的属性只有在被访问时才会被收集依赖。在你的代码中，giao对象的属性aa的初始值是orderStore.longShortFlag，但是orderStore.longShortFlag并没有被访问，所以giao.aa并没有收集到orderStore.longShortFlag的依赖。

为了解决这个问题，你可以使用toRef函数将orderStore.longShortFlag转换为一个响应式引用，然后将这个引用赋值给giao.aa。这样，giao.aa就会收集到orderStore.longShortFlag的依赖，当orderStore.longShortFlag发生变化时，giao.aa也会触发更新。

修改后的代码如下：

import { reactive, watch, toRef } from 'vue'

let giao = reactive({
  aa: toRef(orderStore, 'longShortFlag'),
})

watch(
  () => giao.aa,
  newVal => {
    console.log(newVal)
  },
  { deep: true, immediate: true },
)

这样，当orderStore.longShortFlag发生变化时，giao.aa也会被更新，并且外层的giao对象也会检测到变化。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容