Reactivity API: Kengaytirilgan ​

shallowRef() ​

ref() ning sathli versiyasi.

• Turi

  ts

  function shallowRef<T>(value: T): ShallowRef<T>
  
  interface ShallowRef<T> {
    value: T
  }

• Tafsilotlar

  ref() dan farqli ravishda, sathli ref'ning ichki qiymati o'z holatida saqlanadi va ko'rsatiladi va chuqur reaktiv qilinmaydi. Faqat .value ga kirish reaktiv hisoblanadi.

  shallowRef() odatda katta ma'lumotlar strukturalarining ishlashini optimallashtirish yoki tashqi holat boshqaruv tizimlari bilan integratsiya qilish uchun ishlatiladi.

• Misol

  js

  const state = shallowRef({ count: 1 })
  
  // o'zgarishni ishga tushirmaydi
  state.value.count = 2
  
  // o'zgarishni ishga tushiradi
  state.value = { count: 2 }

• Qarang

  • Qo'llanma - Katta O'zgarmas Strukturalar uchun Reaktivlik Yukini Kamaytirish
  • Qo'llanma - Tashqi Holat Tizimlari bilan Integratsiya

triggerRef() ​

shallow ref ga bog'liq effektlarni majburiy ishga tushirish. Bu odatda sathli ref'ning ichki qiymatiga chuqur o'zgarishlar kiritgandan keyin ishlatiladi.

• Turi

  ts

  function triggerRef(ref: ShallowRef): void

• Misol

  js

  const shallow = shallowRef({
    greet: 'Hello, world'
  })
  
  // Birinchi marta "Hello, world" ni log qiladi
  watchEffect(() => {
    console.log(shallow.value.greet)
  })
  
  // Bu effektni ishga tushirmaydi, chunki ref sathli
  shallow.value.greet = 'Hello, universe'
  
  // "Hello, universe" ni log qiladi
  triggerRef(shallow)

customRef() ​

Uning bog'liqliklarini kuzatish va yangilanishlarni ishga tushirish ustidan aniq nazorat bilan maxsus ref yaratadi.

• Turi

  ts

  function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
  
  type CustomRefFactory<T> = (
    track: () => void,
    trigger: () => void
  ) => {
    get: () => T
    set: (value: T) => void
  }

• Tafsilotlar

  customRef() factory funksiyasini kutadi, u track va trigger funksiyalarini argument sifatida oladi va get va set metodlariga ega ob'ektni qaytarishi kerak.

  Umumiy holda, track() get() ichida chaqirilishi kerak va trigger() set() ichida chaqirilishi kerak. Biroq, ular qachon chaqirilishi kerakligi yoki umuman chaqirilishi kerakligi haqida to'liq nazoratga egasiz.

• Misol

  Oxirgi set chaqiruvidan keyin ma'lum vaqtdan keyin qiymatni yangilaydigan debounced ref yaratish:

  js

  import { customRef } from 'vue'
  
  export function useDebouncedRef(value, delay = 200) {
    let timeout
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newValue) {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            value = newValue
            trigger()
          }, delay)
        }
      }
    })
  }

  Komponentda ishlatish:

  vue

  <script setup>
  import { useDebouncedRef } from './debouncedRef'
  const text = useDebouncedRef('hello')
  </script>
  
  <template>
    <input v-model="text" />
  </template>

  Playground'da sinab ko'ring

  Ehtiyotkorlik bilan ishlating

  customRef ishlatganda, uning getter'ining qaytarilgan qiymatiga ehtiyotkorlik bilan yondashishimiz kerak, ayniqsa getter har safar ishga tushirilganda yangi ob'ekt ma'lumotlar turini yaratganda. Bu ota-ona va farzand komponentlari o'rtasidagi munosabatlarga ta'sir qiladi, bunday customRef prop sifatida uzatilganda.

  Ota-ona komponentining render funksiyasi boshqa reaktiv holatga o'zgarishlar tufayli ishga tushirilishi mumkin. Qayta renderlash paytida bizning customRef'ning qiymati qayta baholanadi va farzand komponentiga prop sifatida yangi ob'ekt ma'lumotlar turini qaytaradi. Bu prop farzand komponentida uning oxirgi qiymati bilan taqqoslanadi va ular farq qilgani uchun customRef'ning reaktiv bog'liqliklari farzand komponentida ishga tushiriladi. Shu bilan birga, ota-ona komponentidagi reaktiv bog'liqliklar ishga tushirilmaydi, chunki customRef'ning setter'i chaqirilmadi va natijada uning bog'liqliklari ishga tushirilmadi.

  Playground'da ko'ring

shallowReactive() ​

reactive() ning sathli versiyasi.

• Turi

  ts

  function shallowReactive<T extends object>(target: T): T

• Tafsilotlar

  reactive() dan farqli ravishda, chuqur konvertatsiya yo'q: faqat ildiz darajasidagi xususiyatlar sathli reaktiv ob'ekt uchun reaktiv hisoblanadi. Xususiyat qiymatlari o'z holatida saqlanadi va ko'rsatiladi - bu shuningdek ref qiymatlariga ega xususiyatlar avtomatik ravishda ochilmasligini anglatadi.

  Ehtiyotkorlik bilan ishlating

  Sathli ma'lumotlar strukturalari faqat komponentdagi ildiz darajasidagi holat uchun ishlatilishi kerak. Uni chuqur reaktiv ob'ekt ichida joylashtirishdan saqlaning, chunki bu tushunish va debug qilish qiyin bo'lgan izchil bo'lmagan reaktivlik xatti-harakatiga ega daraxt yaratadi.

• Misol

  js

  const state = shallowReactive({
    foo: 1,
    nested: {
      bar: 2
    }
  })
  
  // state'ning o'z xususiyatlarini o'zgartirish reaktiv
  state.foo++
  
  // ...lekin ichki ob'ektlarni konvertatsiya qilmaydi
  isReactive(state.nested) // false
  
  // reaktiv emas
  state.nested.bar++

shallowReadonly() ​

readonly() ning sathli versiyasi.

• Turi

  ts

  function shallowReadonly<T extends object>(target: T): Readonly<T>

• Tafsilotlar

  readonly() dan farqli ravishda, chuqur konvertatsiya yo'q: faqat ildiz darajasidagi xususiyatlar faqat o'qish uchun qilinadi. Xususiyat qiymatlari o'z holatida saqlanadi va ko'rsatiladi - bu shuningdek ref qiymatlariga ega xususiyatlar avtomatik ravishda ochilmasligini anglatadi.

  Ehtiyotkorlik bilan ishlating

  Sathli ma'lumotlar strukturalari faqat komponentdagi ildiz darajasidagi holat uchun ishlatilishi kerak. Uni chuqur reaktiv ob'ekt ichida joylashtirishdan saqlaning, chunki bu tushunish va debug qilish qiyin bo'lgan izchil bo'lmagan reaktivlik xatti-harakatiga ega daraxt yaratadi.

• Misol

  js

  const state = shallowReadonly({
    foo: 1,
    nested: {
      bar: 2
    }
  })
  
  // state'ning o'z xususiyatlarini o'zgartirish xatolikni keltirib chiqaradi
  state.foo++
  
  // ...lekin ichki ob'ektlarda ishlaydi
  isReadonly(state.nested) // false
  
  // ishlaydi
  state.nested.bar++

toRaw() ​

Vue tomonidan yaratilgan proxy'ning xom, original ob'ektini qaytaradi.

• Turi

  ts

  function toRaw<T>(proxy: T): T

• Tafsilotlar

  toRaw() reactive(), readonly(), shallowReactive() yoki shallowReadonly() tomonidan yaratilgan proxy'lardan original ob'ektni qaytarishi mumkin.

  Bu proxy kirish / kuzatish yukini o'z ichiga olmasdan vaqtincha o'qish yoki o'zgarishlarni ishga tushirmasdan yozish uchun ishlatilishi mumkin bo'lgan qochish yo'li. Original ob'ektga doimiy havolani saqlash tavsiya etilmaydi. Ehtiyotkorlik bilan ishlating.

• Misol

  js

  const foo = {}
  const reactiveFoo = reactive(foo)
  
  console.log(toRaw(reactiveFoo) === foo) // true

markRaw() ​

Ob'ektni hech qachon proxy'ga konvertatsiya qilinmasligi uchun belgilaydi. Ob'ektning o'zini qaytaradi.

• Turi

  ts

  function markRaw<T extends object>(value: T): T

• Misol

  js

  const foo = markRaw({})
  console.log(isReactive(reactive(foo))) // false
  
  // boshqa reaktiv ob'ektlar ichida joylashganda ham ishlaydi
  const bar = reactive({ foo })
  console.log(isReactive(bar.foo)) // false

  Ehtiyotkorlik bilan ishlating

  markRaw() va shallowReactive() kabi sathli API'lar sizga default chuqur reaktiv/faqat o'qish uchun konvertatsiyadan tanlab chiqish va holat grafigingizda xom, proxy qilinmagan ob'ektlarni joylashtirish imkonini beradi. Ular turli sabablarga ko'ra ishlatilishi mumkin:

  • Ba'zi qiymatlar oddiygina reaktiv qilinmasligi kerak, masalan murakkab 3-toifali klass instansi yoki Vue komponent ob'ekti.

  • Proxy konvertatsiyasini o'tkazib yuborish o'zgarmas ma'lumotlar manbalari bilan katta ro'yxatlarni renderlashda ishlashni yaxshilashni ta'minlashi mumkin.

  Ular kengaytirilgan hisoblanadi, chunki xom tanlab chiqish faqat ildiz darajasida, shuning uchun agar siz ichki, belgilanmagan xom ob'ektni reaktiv ob'ektga o'rnatsangiz va keyin uni yana kiritsangiz, siz proxy qilingan versiyani qaytarib olasiz. Bu identifikatsiya xavflariga olib kelishi mumkin - ya'ni ob'ekt identifikatsiyasiga tayanadigan operatsiyani bajarish, lekin bir xil ob'ektning xom va proxy qilingan versiyalarini ishlatish:

  js

  const foo = markRaw({
    nested: {}
  })
  
  const bar = reactive({
    // `foo` xom deb belgilangan bo'lsa ham, foo.nested emas.
    nested: foo.nested
  })
  
  console.log(foo.nested === bar.nested) // false

  Identifikatsiya xavflari umuman kam uchraydi. Biroq, bu API'larni to'g'ri ishlatish va identifikatsiya xavflarini xavfsiz tarzda oldini olish uchun reaktivlik tizimi qanday ishlashini yaxshi tushunish kerak.

effectScope() ​

Uning ichida yaratilgan reaktiv effektlarni (ya'ni computed va kuzatuvchilar) ushlab qolishi mumkin bo'lgan effekt scope ob'ektini yaratadi, shunda bu effektlar birgalikda bekor qilinishi mumkin. Bu API'ning batafsil ishlatish holatlari uchun uning tegishli RFC ga murojaat qiling.

• Turi

  ts

  function effectScope(detached?: boolean): EffectScope
  
  interface EffectScope {
    run<T>(fn: () => T): T | undefined // undefined agar scope faol bo'lmasa
    stop(): void
  }

• Misol

  js

  const scope = effectScope()
  
  scope.run(() => {
    const doubled = computed(() => counter.value * 2)
  
    watch(doubled, () => console.log(doubled.value))
  
    watchEffect(() => console.log('Count: ', doubled.value))
  })
  
  // scope'dagi barcha effektlarni bekor qilish uchun
  scope.stop()

getCurrentScope() ​

Agar mavjud bo'lsa, joriy faol effect scope ni qaytaradi.

• Turi

  ts

  function getCurrentScope(): EffectScope | undefined

onScopeDispose() ​

Joriy faol effect scope da bekor qilish callback'ini ro'yxatdan o'tkazadi. Callback tegishli effekt scope to'xtatilganda chaqiriladi.

Bu metod qayta ishlatilishi mumkin bo'lgan kompozitsiya funksiyalarida onUnmounted ning komponent bilan bog'lanmagan almashtiruvchisi sifatida ishlatilishi mumkin, chunki har bir Vue komponentining setup() funksiyasi ham effekt scope'da chaqiriladi.

Agar bu funksiya faol effekt scope'siz chaqirilsa, ogohlantirish chiqariladi. 3.5+ da, bu ogohlantirishni ikkinchi argument sifatida true ni uzatish orqali bostirish mumkin.

• Turi

  ts

  function onScopeDispose(fn: () => void, failSilently?: boolean): void