Vue 3 + Electron环境下响应式失效问题排查与解决

核心原因 #

问题出在Electron IPC回调中修改响应式变量时，没有遵循Vue 3响应式系统的规则，导致赋值操作未被Vue的响应式追踪机制捕获，因此UI无法更新。常见的错误场景包括：

• 使用ref时直接重新赋值变量本身（而非修改.value属性）
• 使用reactive时直接替换整个响应式对象（而非修改对象属性或合并数据）
• 监听回调注册时机过早，导致变量未被Vue追踪就触发赋值

正确解决方式 #

方式1：使用ref的正确写法 #

如果用ref声明响应式变量，必须通过.value属性修改值，即使在异步回调中也需遵循此规则：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const pdata = ref("22222222")

    onMounted(() => {
      // 组件挂载后注册IPC监听，确保变量已被响应式追踪
      window.api.receive("fromMain", (rawData) => {
        // 若主进程传的是JSON字符串，先解析为对象/值
        const parsedData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
        // 正确更新ref的值
        pdata.value = parsedData
      })
    })

    return { pdata }
  }
}

模板中直接使用{{ pdata }}即可。

方式2：使用reactive的正确写法 #

若使用reactive，需避免直接替换整个响应式对象，而是修改对象属性或用Object.assign合并数据：

import { reactive, onMounted } from 'vue'

export default {
  setup() {
    // 用对象包裹初始值，避免直接替换整个响应式对象
    const pdata = reactive({ content: "22222222" })

    onMounted(() => {
      window.api.receive("fromMain", (rawData) => {
        const parsedData = typeof rawData === 'string' ? JSON.parse(rawData) : rawData
        // 方式1：直接修改属性
        pdata.content = parsedData
        // 若返回的是对象，也可用Object.assign合并
        // Object.assign(pdata, parsedData)
      })
    })

    return { pdata }
  }
}

模板中对应改为{{ pdata.content }}。

关键注意事项 #

1. 务必在组件挂载后（如onMounted钩子）注册IPC监听，确保响应式变量已被Vue的追踪机制覆盖
2. 确认主进程传递的data格式：若为JSON字符串，需先通过JSON.parse解析为可操作的对象/值
3. 检查代码中是否存在其他逻辑意外覆盖pdata变量的值

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