Vue3 script setup中ref()状态互相赋值的正确写法是什么

ref() 调用后会返回一个带 .value 属性的响应式引用对象，用 let 声明的变量存储的是这个对象的引用地址，而非内部包裹的实际值，两种赋值写法的逻辑完全不同：

两种写法的实际效果 #

• 写法1：stateOne.value = stateTwo.value
  这是值拷贝操作，赋值后stateOne和stateTwo仍然是两个完全独立的ref实例，只是两者内部存储的值暂时相等。后续修改任意一个ref的.value，都不会对另一个产生影响，是绝大多数业务场景下的正确用法。
  效果示例：

  <script setup>
  import { ref } from 'vue'
  let stateOne = ref('1')
  let stateTwo = ref('2')
  
  stateOne.value = stateTwo.value
  console.log(stateOne.value) // 输出 '2'
  stateTwo.value = '修改stateTwo'
  console.log(stateOne.value) // 仍然输出 '2'，不受stateTwo修改影响
  </script>
  

• 写法2：stateTwo = stateOne
  这是变量引用替换操作，会直接把stateTwo变量原本存储的ref实例覆盖，让它指向stateOne对应的那个ref对象。此时两个变量本质是同一个ref的别名，修改任意一个的.value，两个变量访问到的值都会同步变化，最初创建的存值为'2'的ref实例会被直接回收。
  效果示例：

  <script setup>
  import { ref } from 'vue'
  let stateOne = ref('1')
  let stateTwo = ref('2')
  
  stateTwo = stateOne
  console.log(stateTwo.value) // 输出 '1'
  stateOne.value = '修改stateOne'
  console.log(stateTwo.value) // 同步输出 '修改stateOne'，指向的是同一个ref实例
  </script>
  

  这种写法如果出现在非顶层作用域，很容易导致模板绑定的响应式丢失，除非明确需要给同一个响应式状态起别名，否则不推荐使用。

选择建议 #

• 常规需要两个独立响应式状态、仅同步初始值的场景，统一用refA.value = refB.value的写法。
• 只有明确需要多个变量名指向同一个ref实例时，才用直接给ref变量赋值的写法，这类场景在实际业务中占比极低。

注意：如果需要两个状态保持长期响应式关联（一个变另一个自动跟着变），不要用上述两种写法，应该用computed来派生状态。

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