Vue TSX中ref失去响应式：点击按钮函数执行但视图不更新

你的代码里changeMsg函数执行后msg.value已修改，但视图未同步更新，核心原因是在Vue TSX中直接使用msg.value无法让响应式系统正确追踪变化。Vue的JSX支持ref对象的自动解包，直接使用ref本身就能触发视图的响应式更新。

修改后的代码：

import { ref } from 'vue'
const Test = () => {
  const msg = ref('I am Brave')
  const changeMsg = () => {
    console.log('aa')
    msg.value = 'I will get everything I want'
  }
  return (
    <div>
      {/* 直接使用msg而非msg.value，借助自动解包触发响应式更新 */}
      <span>{msg}</span>
      <button onClick={changeMsg}>btn</button>
    </div>
  )
}

export default Test

如果你的JSX转换插件版本较低，不支持自动解包特性，也可以用unref函数手动解包：

import { ref, unref } from 'vue'
const Test = () => {
  const msg = ref('I am Brave')
  const changeMsg = () => {
    console.log('aa')
    msg.value = 'I will get everything I want'
  }
  return (
    <div>
      <span>{unref(msg)}</span>
      <button onClick={changeMsg}>btn</button>
    </div>
  )
}

export default Test

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