Vue3中使用Ref出现Write operation failed只读警告的解决求助

可能的原因及对应解决方案 #

1. 传入的pos是computed对象，后续修改了其属性 #

如果pos是通过computed()创建的响应式对象，直接将它赋值给rootCursorPosition.value后，若后续代码中尝试修改rootCursorPosition.value的属性（比如rootCursorPosition.value.node = newNode），就会触发这个警告——因为computed返回的是只读的响应式引用，不能直接修改它的内部属性。

解决方法：
将pos转换成普通对象再赋值，破坏其响应式关联：

const setCursorPosition = (pos) => {
    if (isRoot.value) {
        // 展开成普通对象，避免后续修改触发computed只读限制
        rootCursorPosition.value = { ...pos }
        return
    }
}

如果pos包含嵌套对象，需要深拷贝：

// 用JSON序列化反序列化实现深拷贝（注意无法拷贝函数、Symbol等）
rootCursorPosition.value = JSON.parse(JSON.stringify(pos))

// 或者使用深拷贝工具方法处理复杂对象

2. 误将computed赋值给rootCursorPosition #

检查代码中是否有其他地方，把某个computed的值直接赋值给了rootCursorPosition.value，然后尝试修改它。比如：

// 错误示例：把computed对象赋值给ref
const someComputed = computed(() => ({ node: xxx, placement: 'inside' }))
rootCursorPosition.value = someComputed.value // 这里赋值的是computed的只读值
// 后续修改就会触发警告
rootCursorPosition.value.placement = 'after'

解决方法同样是将computed返回的值转换成普通对象后再赋值，避免后续修改操作触碰到只读的computed引用。

3. 排查isRoot的关联逻辑 #

如果isRoot是一个computed，确保你没有在任何地方尝试修改isRoot.value——不过从你贴的代码来看，这里只是判断isRoot.value，所以这个可能性较低，但可以简单排查确认。

总结 #

这个警告的核心是代码中存在对computed返回值的修改操作，你贴的代码本身没有直接触发，但问题大概率出在pos参数的来源，或者后续对rootCursorPosition.value的修改操作上。通过将computed值转换成普通对象再赋值，就能避免触发只读限制。

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