Reactivity dynamic contentlar bilan ishlashga ham keldik!

ref()

Vue'da odatda ref() ishlatiladi Reactdagi useState() kabi, lekin ishlatilishi sal boshqacha

ref qiymatni saqlab turadi, va uni yangilash mumkin

import { ref } from "vue";

const count = ref(0);

qiymatni olish refName.value orqali bo'ladi

const count = ref(0);

console.log(count); // { value: 0 }
console.log(count.value); // 0

count.value++;
console.log(count.value); // 1

Nega biz ref qiymatiga to'g'ridan to'g'ri kira olmaymiz? refName.value kerak

// Ref shunday tuzilgan va u qiymat object ichida yotibdi
const myRef = {
  _value: 0,
  get value() {
    track()
    return this._value
  },
  set value(newValue) {
    this._value = newValue
    trigger()
  }
}

reactive()

ref dan farqli u object ichida qiymatni saqlamaydi, o'zi uchun alohida object yaratadi

import { reactive } from 'vue'

const state = reactive({ count: 0 })

<button @click="state.count++">
  {{ state.count }}
</button>

• Qisqa qilib aytadigan bo'lsa, ref() bu primitive qiymatlar uchun, reactive() esa object turdagilar uchun deb tushunsak bo'ladi