Vue3 toRefs 的坑 - Githubissues

如果写一个组件用到了Vue3 的 setup。那第一件事就是面临如何取外部参数的问题官方写法

import { toRefs } from 'vue'

setup(props) {
  // 因为 props 是一个动态渲染的数据，只能用toRefs来对props进行解构，不过setup第二个参数可以直接使用ES6 的解构
  const { title } = toRefs(props)

  console.log(title.value)
}

但是，问题来了。从toRefs 解出来的数据，是只读的。

我们看他的定义

(parameter) props: Readonly<LooseRequired<Readonly<{
    menuList?: unknown;
    currentDocId?: unknown;
} & {} & {
    menuList?: Record<string, any> | undefined;
    currentDocId?: string | undefined;
}> & {}>>

从他的泛型中取的数据是可读，意味着不能讲它作为赋值操作的右值。

Cenkaifeng / learn-note

Vue3 toRefs 的坑 #2