toref toRef toRefs refs

// 直接接收 props 对象

const props = defineProps(['user'])

// 使用 toRef 创建与 prop 保持同步的 ref

const form = ref({

  id: -1,

  phonenumber: '',

  email: ''

})

// 建立响应式链接

form.value = toRef(props, 'user')

我们之前用的。form.value =user 这样没有响应式。

const props = defineProps({

  user: {

    type: Object,

    required: true

  }

})

// 使用 toRefs 将 props.user 的属性转为 ref

const form = toRefs(props.user)

// 在模板中，你需要使用 .value 来访问，例如 form.id.value

如果 props.user本身可能是响应式对象，更稳妥的做法是：

const form = toRefs(toRef(props, 'user').value)

使用计算属性的 Getter 和 Setter（适用于表单双向绑定）

const props = defineProps({

  user: {

    type: Object,

    required: true

  }

})

const emit = defineEmits(['update:user']) // 用于向上传递更新

const form = computed({

  get: () => props.user,

  set: (newValue) => {

    // 当子组件修改 form 时，触发事件通知父组件更新

    emit('update:user', newValue)

  }

})