Vue.js 3 - 只读嵌套对象

Question

有没有办法使用新的 Vue.js Reactivity API 将对象键绑定到现有的 Ref 值作为只读？

示例。

setup() {
  const input = ref({
    firstName: 'Bob',
    email: 'bob@so.com'
  })

  const args = {
    postID: 32,
    email: readonly(input.value.email)
  }

  return { input, args }
}

这不起作用。
args.email 没有得到更新。

Answer 1

正如@boussadjra-brahim 指出的那样，readonly 不能用于嵌套字段。
只有在不复制整个对象的情况下才能使用 computed 的解决方法。

const args = computed(() => {
  return {
    post_id: 32,
    email: input.value.email,
  }
})

Answer 2

Readonly 接受使用 ref 或 reactive 创建的属性，而不是该属性中的嵌套字段，以便反应：

 const input = ref({
    firstName: 'Bob',
    email: 'bob@so.com'
  })

  const args =readonly(input)