Vue3 TypeScript报错：Type 'string'不可赋值给Ref<string>，求解析

代码存在的核心问题 #

• ref<string>('') 创建的是响应式引用对象（类型为 Ref<string>），直接给 placeholderTitle 赋值 ''，相当于把原本的响应式对象替换成了普通字符串，TypeScript 会严格校验类型，因此抛出 Type 'string' is not assignable to type 'Ref<string>' 的错误。
• 更关键的是，这种操作会完全丢失响应性：后续修改 placeholderTitle 不会触发视图更新，因为变量已经不再指向原有的响应式引用对象。

关于赋值的疑问解析 #

1. 为什么直接赋值本地运行正常？
   JavaScript 是弱类型语言，不会做严格的类型校验，语法上允许这种“覆盖变量类型”的操作，但这属于隐性错误——代码能运行，但响应性已经失效，后续依赖该变量的视图无法同步更新。

2. 为什么你觉得 placeholderTitle.value 会报错？
   正常情况下，正确的写法就是 placeholderTitle.value = ''，这在 TypeScript 和 Vue 中都是合法的，不会报错。你遇到的报错大概率是以下场景：

   • 先执行了 placeholderTitle = ''，把变量变成了普通字符串，之后再访问 placeholderTitle.value——字符串没有 .value 属性，自然会报错。
   • 在 Vue 模板中错误地使用了 .value：模板中 Vue 会自动为 ref 解包，不需要手动加 .value，如果加了反而会报错（因为模板里的变量已经是解包后的原始值）。

正确代码示例：

let placeholderTitle = ref<string>('')

function beforeDragStart() {
    placeholderTitle.value = ''
    // ...其他逻辑
}

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