Analisis contoh penggunaan jam tangan dan jam tanganEffect dalam vue3

tonton

watch monitor single data

<template>
    <input type="text" v-model="text1" />
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;
const text1 = ref(&#39;&#39;)

watch(text1, (newVal, oldVal) => {
    console.log(&#39;监听单个数据&#39;, newVal, oldVal)
})
</script>

watch monitors multiple data

<template>
    <input type="text" v-model="text1" />
    <input type="text" v-model="text2" />
</template>

<script setup>
import { ref, watch } from &#39;vue&#39;
const text1 = ref(&#39;&#39;)
const text2 = ref(&#39;&#39;)

watch([text1, text2], (newVal, oldVal) => {
    console.log(&#39;监听一组数据&#39;, newVal, oldVal)
})
</script>

watch listening object

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>
<script setup>
import { reactive, watch } from &#39;vue&#39;
const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watch(student, (newVal, oldVal) => {
    console.log(&#39;newVal&#39;, newVal)
    console.log(&#39;oldVal&#39;, newVal)
})
</script>

watchTerdapat juga parameter ketiga, deep dan immediate, yang boleh ditambah untuk melihat kesan

Tonton nilai tertentu objek pemantauan

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>
<script lang="ts" setup>
import { reactive, watch } from &#39;vue&#39;
const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watch(() => student.name, (newVal, oldVal) => {
    console.log(&#39;newVal&#39;, newVal)
    console.log(&#39;oldVal&#39;, newVal)
}, {
    deep: true,
    immediate: true
})
</script>

Apabila memantau sifat tertentu objek, anda perlu menggunakan fungsi anak panah

watchEffect

Mengenai watchEffect, tapak web rasmi memperkenalkannya seperti ini: Agar untuk memohon dan memohon semula secara automatik mengikut keadaan responsif Sebagai kesan sampingan, kita boleh menggunakan kaedah watchEffect, yang dengan serta-merta melaksanakan fungsi yang diluluskan, sambil menjejak kebergantungannya secara reaktif dan menjalankan semula fungsi apabila kebergantungannya berubah. Dalam erti kata lain, kita tidak perlu meneruskan sumber pergantungan tertentu, dan ia akan melaksanakan fungsi panggil balik dengan serta-merta Jika fungsi itu menghasilkan kesan sampingan, ia akan menjejaki kebergantungan kesan sampingan secara automatik dan menganalisis sumber tindak balas secara automatik. Konsepnya mungkin samar-samar hanya dengan melihat contoh yang paling mudah dahulu:

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from &#39;vue&#39;

const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watchEffect(() => {
    console.log(&#39;name: &#39;,student.name, &#39;age: &#39;, student.age)
})
</script>

kesan sampingan watchEffect

Jadi apa itu kesan sampingan sebenarnya . Sebelum memantau, saya perlu melakukan satu perkara.

<template>
    name: <input type="text" v-model="student.name" />
    age: <input type="number" v-model="student.age" />

    <h3 id="student-name">{{student.name}}</h3>
</template>

<script lang="ts" setup>
import { reactive, watchEffect } from &#39;vue&#39;

const student = reactive({
    name: &#39;&#39;,
    age: &#39;&#39;
})
watchEffect((oninvalidate) => {
    oninvalidate(() => {
        student.name = &#39;张三&#39;
    })
    console.log(&#39;name: &#39;, student.name)
}, {
    // pre 组件更新前； sync：强制效果始终同步； post：组件更新后执行
    flush: &#39;post&#39;  // dom加载完毕后执行
})
</script>

Sebelum memantau, biarkan student.name diberikan nilai 'Zhang San' Tidak kira apa nilai yang anda masukkan, name akan sentiasa menjadi 'Zhang San'

Berhenti memantau

Pendengar yang kami cipta menggunakan pernyataan segerak akan terikat secara automatik pada tika komponen dan akan berhenti secara automatik apabila komponen dipunggah Walau bagaimanapun, jika kami mencipta pendengar dalam panggilan balik tak segerak, ia tidak akan terikat kepada semasa komponen, ia mesti dihentikan secara manual untuk mengelakkan kebocoran memori. Jadi bagaimana untuk menghentikannya? Sebenarnya, kita hanya perlu memanggil fungsi yang dikembalikan oleh

atau watch watchEffect

const stop = watchEffect(() => {})

// 停止监听
unwatch()

Perbezaan antara

Selepas menggunakan

dan sekali lagi, saya mendapatinya Dua perbezaan utama adalah seperti berikut: watchwatchEffect

• dilaksanakan secara malas, tetapi

  tidak tanpa mengambil kira parameter konfigurasi ketiga watch , watchEffectKomponen tidak akan dilaksanakan apabila ia dilaksanakan buat kali pertama Ia hanya akan dilaksanakan apabila kebergantungan berubah kemudian, watch akan dilaksanakan serta-merta apabila program dilaksanakan di sini, dan kemudian bertindak balas kepada. pergantungannya berubah. watchwatchEffect

• perlu melepasi objek mendengar,

  tidak perluwatchwatchEffect

Atas ialah kandungan terperinci Analisis contoh penggunaan jam tangan dan jam tanganEffect dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!