Analisis contoh penggunaan jam tangan dan jam tanganEffect dalam vue3-View.js-php.cn

Analisis contoh penggunaan jam tangan dan jam tanganEffect dalam vue3

王林

Lepaskan： 2023-05-12 21:43:04

ke hadapan

940 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>{{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>

Salin selepas log masuk

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()

Salin selepas log masuk

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!