Cara menggunakan jam tangan di bawah vue3

Memandangkan ia adalah pemantauan data, apa yang dipantau ialah perubahannya. Kemudian anda perlu dapat menangkap perubahannya, jadi data yang dipantau mestilah data responsif

tonton(WatcherSource, Callback, [WatchOptions])
Parameter:
WatcherSource: Ingin memantau data responsif.
Panggil balik: Fungsi panggil balik untuk dilaksanakan, parameter input (newValue, oldValue).
[WatchOptions]: deep, serta-merta dan flush adalah pilihan.

Untuk konfigurasi parameter WatchOptions:

deep: Apabila pemantauan mendalam terhadap data jenis rujukan seperti objek diperlukan, tetapkan deep: true dan nilai lalai adalah palsu .
segera: Secara lalai, jam tangan malas Apabila serta-merta: benar ditetapkan, jam tangan akan melaksanakan fungsi panggil balik sekali serta-merta selepas permulaan.
siram: Kawal masa pelaksanaan fungsi panggil balik. Ia boleh ditetapkan kepada pra, siaran atau penyegerakan.
Pra: Nilai lalai, apabila nilai yang dipantau berubah, fungsi panggil balik akan dilaksanakan terlebih dahulu (dilaksanakan sebelum DOM dikemas kini).
Siaran: Selepas kemas kini dan pemaparan DOM selesai, fungsi panggil balik dilaksanakan. Penyegerakan
: Sebaik sahaja nilai yang dipantau berubah, fungsi panggil balik dilaksanakan secara serentak (disyorkan untuk menggunakannya dengan berhati-hati).

1. Memantau satu ref data

boleh mendapatkan nilai baharu dan nilai lama.

2. Pantau rujukan data jenis rujukan: Pemantauan mendalam

const count = ref(1);
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

Walaupun keseluruhan tatasusunan dipantau sebagai jenis data rujukan, perubahan pada salah satu item dalamannya tidak akan diperhatikan. Jadi kod dalam jam tangan tidak dilaksanakan.

1, rujukan jenis rujukan terus memantau dengan mendalam

Pada masa ini, anda perlu menggunakan pemantauan mendalam: deep:true

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
 count.value.a = 5;
};
watch(count, (newValue, oldValue) => {
  console.log('值发生了变更', newValue, oldValue);
});

Nilai telah berubah Proksi {a: 5, b: 2} Proksi {a: 5, b: 2}

Boleh ambil perhatian bahawa apa yang diperlukan untuk pemantauan mendalam ialah jenis data rujukan itu sendiri, bukan sifat-sifat di dalamnya. Lebih-lebih lagi, dia hanya boleh mendapatkan nilai baru, tetapi bukan nilai lama.

2 Salinan dalam rujukan jenis rujukan dan pemantauan mendalam

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

Dengan cara ini, salin dalam sumber data jenis rujukan jam tangan untuk melengkapkan pemerolehan nilai lama dan baharu:

Nilai telah berubah {a: 5, b: 2} {a: 1, b: 2}

Tiga, pantau data tunggal: reaktif

const count = ref({
  a: 1,
  b: 2
});
const handleClick = function () {
  count.value.a = 5;
};
watch(
  () => {
    return { ...count.value };
  },
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true }
);

di sini Terutamanya () => single.count, apa yang dipantau ialah kiraan dalam satu, dan fungsi panggil balik akan dicetuskan hanya apabila atribut ini berubah. Dalam kes ini, adalah mungkin untuk mendapatkan nilai lama dan baru.

Keempat, memantau data jenis rujukan: reaktif

const single = reactive({ count: 1, test: 2 });
const handleClick = function () {
  single.count++;
};
watch(
  () => single.count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { immediate: true }
);

data reaktif, ia tidak mempunyai kesan sama ada deep: true digunakan atau tidak Jika atribut dalam satu perubahan, ia boleh dipantau laksanakan fungsi panggil balik.

Perbezaan daripada No. 3 ialah hanya nilai baharu boleh diperolehi dalam kes ini.

Lima, segera: benar

Secara lalai, jam tangan malas Apabila kita menetapkan immediate: true, jam tangan akan melaksanakan fungsi panggil balik serta-merta selepas pemula.

<template>
  <div class="mine-box">
    <div ref="countDom">{{ single.count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from &#39;vue&#39;;
const single = reactive({ count: 1, test: { a: 1, b: 2 } });
const handleClick = function () {
  single.test.a++;
};
watch(
  single,
  (newValue, oldValue) => {
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { immediate: true }
);
</script>

Keenam, pantau berbilang sumber data

const count = ref(1);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

Jika dua nilai berubah pada masa yang sama, fungsi panggil balik jam tangan akan dicetuskan sekali sahaja dan perubahan setiap nilai akan mencetuskan menonton fungsi panggil balik.

Jika anda ingin mencetuskan panggilan balik apabila menukar satu sel data, anda boleh menambah nextTick antara dua perubahan data.

7. Konfigurasi siram

1 Secara lalai, fungsi panggil balik dipanggil sebelum rendering DOM selesai

Fungsi panggil balik diutamakan daripada pelaksanaan kemas kini DOM mendengar perubahan nilai, siram Lalai adalah pra. Ini bermakna jika terdapat operasi berkaitan DOM dalam fungsi panggil balik dan segera: benar dikonfigurasikan dalam parameter, ralat akan dilaporkan kerana DOM belum diberikan pada masa ini dan DOM tidak boleh diperolehi.

Seterusnya lihat kod:

const count = ref(1);
const double = ref(2);
const handleClick = function () {
  count.value++;
  double.value++;
};
watch(
  [count, double],
  (newValue, oldValue) => {
    console.log('值发生了变更', newValue, oldValue);
  },
  { deep: true, immediate: true }
);

Hasil yang diperoleh:

--- 1 nilai berubah 2 1

Dalam fungsi panggil balik, nilai baru telah menjadi 2, tetapi DOM yang diperoleh masih yang sebelumnya. Secara lalai, nilai flush ialah pra. Apabila nilai berubah, fungsi panggil balik akan dicetuskan sebelum DOM dikemas kini.

2, siram: 'post’ Jalankan fungsi panggil balik

<template>
  <div class="mine-box">
    <div ref="countDom">{{ count }}</div>
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;;
const count = ref(1);
const countDom = ref(null);
const handleClick = function () {
  count.value++;
};
watch(
  count,
  (newValue, oldValue) => {
    console.log(&#39;---&#39;, countDom.value.textContent);
    console.log(&#39;值发生了变更&#39;, newValue, oldValue);
  },
  { deep: true }
);
</script>

selepas pemaparan dom selesai:

--- 2 nilai mempunyai berubah 2 1

Apabila fungsi panggil balik dipanggil, DOM telah dikemas kini DOM yang diperolehi pada masa ini ialah DOM yang telah dikemas kini selepas data ditukar.

Atas ialah kandungan terperinci Cara menggunakan jam tangan di bawah vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!