Vue3中响应式state更新后DOM未渲染username的问题咨询

1. 为什么username无法更新？ #

你在setup函数返回时使用了...state展开语法，这会把reactive对象里的username属性提取成普通字符串值，而非保留响应式引用。Vue3的reactive响应性是绑定在原对象本身的，展开后分离出来的username就彻底失去了响应式能力——虽然你能在代码里修改state.username，但模板中的{{username}}已经和原响应式对象断开关联，自然不会同步更新。

2. 这是推荐的实现方式吗？ #

不是，推荐使用以下两种方案：

• 方案一：直接返回整个state对象
  修改setup的返回逻辑：

  return {
    state,
    submit
  }
  

  模板中对应修改为：

  Name: {{state.username}}
  

• 方案二：用toRefs转换后再展开
  先导入toRefs：

  import { reactive, toRefs } from 'vue'
  

  再修改返回逻辑：

  return {
    ...toRefs(state),
    submit
  }
  

  这种方式不需要改动模板，{{username}}可直接正常使用，且保留响应性。

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