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

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

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

  const args =readonly(input)

Answer 2

正如 @boussadjra-brahim 所指出的，只读不能用于嵌套字段。
只有不复制整个对象的解决方法可能是使用 computed then.

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

Vue.js 3 - 嵌套对象只读

Vue.js3 - Reaonly on nested object

javascript

vue.js

vue-reactivity