?? ?? ? ??? ??? ???? ???? Vue.js? v-model ???? ??? ? ?? ????. ??? ??? ?? ?? ??? ?? v-model? ???? ??? ? ????? ? ?? ??? ?????.

???? ?? ??? ??? ????.

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

???? ??? modelValue prop ?? ???? ????. ?? emit ???? ?? ????? ?? ?? ?? ??? ?? ???? ?? ?? ??? ?? ??? ?????. ? ??? ?? ?? ??? ?? ?? ??? ??? ??? ???? ? ?? ??? ??? ???? ??? ???? ??? ??? ?????.

Vue ??? ??? ?? ?? ?? ?? ??? ??? ????? ? ???. ??? ?? Vue? ??? ??? ?????.

???? ? ?????

JavaScript? ??? ??? ??? ???? ??? ??? ?????. ?? ?? ??? ?? ??? ??? ??? ?? ??? ? ??? ?????. ??? Vue? ??? ?? ??? ??? ?? ???? ????(??? ??? ???? ??? ?????). ??? ??? ??? ?? ???? ?? ???????? ?? ? ???? ??? ??? ??? ? ????.

???? ?? ?? ?? v-model?? ?????. ??? ?? ?? ??? ??? ?? ?? ?? ???? ??? ??? ? ?? ??? ?? v-model? ??? ? ????. ?? ??? ???? ?????.

?? ??? ???? ??? ???? ?? ??? ?? v-model? ???? ??? ??????

?? ??

? ?? ??? ?? ??? ?? ???? defineModel??? ??? ???? ????. ??? ? ??? ?? ??? ??? ????. ?, ?? ??? ?? ????? ??? ??? ??? ????? ??? ?????.

? ??? ???? ?? "??" ?? ??? ?? ???????. ? ?? ??? ??? ?? ??? ? ??? ????? ???? ?? ?? ??? ?? ????? ???????. ??? ?? ??? ?? ??? ???? ?? ????? ??? ????.

? ??? ?? ??? ?? ??? ??? ???? ??? ?????.

import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter對象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

??? ???? ????. getter?? ??? ??? ??? ?? ???? ?? ??? ??? ?? ???? ?????.

defineModel ?????. update:modelValue? ?? ???? ???? ??? ?? ??? ?? ?? ?????.

???

? ??? ???? "Vue ??"? ?? ?? ?? ???? ??? ???? ? ?? ???? ???? ????.

1. ???? modelValue prop? ?? ??? ?????? ?? ?? ???????. ??? ?? ?? ??? ?? ?? ??? ??? ?? prop ?? ?????.
2. ???? ?? ?? ??? ?????. ?? ?? ?????? ?? ??? ?? ???? ??? ??? ?? ??? ??? ?? ?? ??? ?????.

? ? ??? ??? ??? ??? ??? ????? modelValue prop? ?? ????? ??? ?? ?? ?? ???? ?? ????? ??? ?? ???.

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

“?? ????!”?? ?????? ?? ????. ??? ?? ? ???? ? ??? ???????.

VueUse? ???? ??????

? ??? ??? ??? ?? ??? ???? ?? ????? ????? ?? ?????. ??? ?? ??? ??? ??? ? ???? ??? ????! VueUse? useVModel ?? ??? ? ??? ???? ? ??? ? ? ????!

VueUse? ??? ???? ? "??? ?? ?"???? ??? ??? Vue ???? ????????. ??? ?????? ???? ??? ??? ??? ?? ?? ?? ??? ??? ??? ? ????.

??? useVModel? ???? ?????? ?? ????.

import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter對象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

?? ? ????!

?????! ??? ?? ?? ???? ?? ???? ?? Vue?? v-model? ???? ??? ???? ???? ??? ???????. ???? ????? VueUse? useVModel? ?? ?? ??? ?????? ???????? ???? ?? ??? ?? ??? ??? ? ????.

??? ? ??? ?? ?? ??? Stackblitz ?????. ???? ???? ??? ???.

????? ???? ??? ?? ???!

? ??? Vue?? v-model? ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!