Блог

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

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

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

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

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

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

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

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

Если вы используете только 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 .