Cara menggunakan jam tangan dalam Vue3

Fungsi jam tangan digunakan untuk mendengar perubahan dalam nilai tertentu Apabila nilai berubah, logik pemprosesan yang sepadan dicetuskan.

1. Contoh asas jam tangan

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from &#39;vue&#39;
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
  }
})
</script>
 
<style>
 
</style>

2. Jam tangan memantau berbilang data

fungsi pengambil:

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`我是x与y之和${sum}`);
  }
);
</script>
 
<style>
</style>

Susun atur yang terdiri daripada pelbagai sumber

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  [x,y],
  ([x,y]) => {
    console.log(`我是x=>${x},我是y=》${y}`);
  }
);
</script>
 
<style>
</style>

3. Nilai objek pemantauan jam tangan

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})
</script>
 
<style>
</style>

4. Parameter konfigurasi pendengar jam tangan

1.deep

digunakan untuk membolehkan pemantauan mendalam

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true })
</script>
 
<style>
</style>

2.segera

Sama ada untuk mendayakan pengesanan permulaan Secara lalai, kaedah dalam pendengar hanya akan dilaksanakan apabila nilai berubah Selepas serta-merta didayakan, pengamulaan akan dilaksanakan sekali.

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
 
<style>
</style>

5 Permudahkan menonton melalui watchEffect()

Adalah perkara biasa untuk panggilan balik pendengar menggunakan keadaan reaktif yang sama seperti sumber. Contohnya:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(obj.value,()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

Kita boleh menggunakan fungsi watchEffect untuk memudahkan kod di atas. watchEffect() Membolehkan kami menjejak kebergantungan reaktif panggilan balik secara automatik. Pendengar di atas boleh ditulis semula sebagai:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// watch(obj.value,()=>{
//   console.log(obj.value.name);
// })
watchEffect(()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

Nota: Perlu diingat bahawa panggil balik watchEffect akan dilaksanakan serta-merta, tidak perlu menyatakan segera

6. watch vs. watchEffect

<🎜 Kedua-dua >watch dan watchEffect boleh melaksanakan panggilan balik dengan kesan sampingan secara reaktif. Perbezaan utama antaranya ialah cara kebergantungan reaktif dijejaki:

• tonton hanya menjejaki sumber data yang didengari secara eksplisit. Ia tidak akan menjejaki apa-apa yang diakses dalam panggilan balik. Selain itu, panggilan balik hanya dicetuskan apabila sumber data benar-benar berubah. jam tangan akan mengelakkan kebergantungan penjejakan apabila kesan sampingan berlaku, jadi kami boleh mengawal dengan lebih tepat apabila fungsi panggil balik dicetuskan.

• watchEffect akan menjejaki kebergantungan semasa berlakunya kesan sampingan. Ia secara automatik akan menjejaki semua sifat reaktif yang boleh diakses semasa penyegerakan. Ini lebih mudah dan kodnya cenderung lebih bersih, tetapi kadangkala kebergantungan reaktifnya kurang jelas.

7. Mekanisme mencetuskan panggilan balik dan menghentikan pendengar

Jika anda ingin mengakses DOM yang dikemas kini oleh Vue dalam panggilan balik pendengar, anda perlu menentukan siram: ' post ' pilihan:

watch(source, callback, {
  flush: 'post'
})
 
watchEffect(callback, {
  flush: 'post'
})

Berhenti mendengar

Pendengar yang dibuat dengan pernyataan segerak dalam persediaan() atau akan diikat secara automatik pada contoh komponen hos dan akan berhenti secara automatik apabila hos komponen dinyahpasang. Oleh itu, dalam kebanyakan kes anda tidak perlu risau tentang menghentikan pendengar.

Perkara penting ialah pendengar mesti dibuat dengan pernyataan segerak: jika anda mencipta pendengar dengan panggilan balik tak segerak, maka ia tidak akan terikat pada komponen semasa dan anda mesti menghentikannya secara manual untuk mengelakkan ingatan kebocoran. Sebagai contoh di bawah:

// ...当该侦听器不再需要时
unwatch()

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