Почему в Vue.js 3 мне нужно использовать свойство value для ref, но не для reactive?

По сути, название уже говорит само за себя: почему в Vue.js 3 мне нужно использовать свойство value на ref, но не на reactive?

Я понимаю, что ref предназначен для простых значений, таких как логические, числа,…, и что reactive предназначен для сложных значений, таких как объекты и массивы. Я не получаю:

  • Почему мне нужно указывать value, если я хочу получить доступ к значению ref, но не если я использую reactive? Разве это не несоответствие API или есть настоящая техническая причина, по которой должно быть таким?
  • Почему я не могу использовать одно для обоих? Другими словами: есть ли техническая причина, по которой нет единственной функции, которая решает, в зависимости от типа данного значения, как обернуть это внутренне?

Я предполагаю, что я чего-то упускаю, и это не это легко. Кто-нибудь может помочь?


javascript vue.js vuejs3 vue-composition-api
person Golo Roden    schedule 16.08.2020    source источник
comment
Вы нашли в моем ответе что-то полезное или мне следует удалить его?   -  person Boussadjra Brahim    schedule 20.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Да, Ref и Reactive являются оболочками реактивных переменных.

const refVar = ref(true)
const reactiveVar = reactive({ haha: 'LoL' })

Здесь и refVar, и reactiveVar являются просто переменными-оболочками, чтобы сохранять реактивность для своих значений внутри. И, как вы сказали, разница между ref и reactive в том, что ref для одной переменной, а reactive для переменной со структурой словаря.

ref следит за изменениями в своем value свойстве и после изменения генерирует реактивное событие, так что наблюдатели могут обновляться автоматически. Но reactive заботится обо всех своих свойствах.

Если вы используете только реактивную систему, было бы очень неудобно сохранять реактивность для отдельных переменных.

const refSingle = reactive({ value: 'I wanna be used with Ref' })

И вы должны постоянно звонить refSingle.value на стороне шаблона.

Если вы используете только ref, было бы очень сложно сохранить реактивность для переменных типа dict.

const reactiveDict = ref({
  type: 'dictionary',
  purpose: 'reactive'
})

В этом случае, если вы используете его в скрипте, вы должны каждый раз использовать свойство value.

reactiveDict.value = {
  ...reactiveDict.value,
  purpose: 'ref'
}

В этом случае вы можете использовать reactive вместо ref.

person Aito Hideki    schedule 10.09.2020