Analyse der Anwendungsbeispiele von watch und watchEffect in vue3-View.js-php.cn

Analyse der Anwendungsbeispiele von watch und watchEffect in vue3

王林

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

nach vorne

880 Leute haben es durchsucht

watch

watch überwacht einzelne Daten.

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

Nach dem Login kopieren

watch überwacht mehrere Daten > und `sofort`, Sie können es hinzufügen, um den Effekt zu sehen

watch überwacht einen bestimmten Wert des Objekts

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

Nach dem Login kopieren

Wenn Sie ein bestimmtes Attribut des Objekts überwachen, müssen Sie den Pfeil verwenden Funktion watch还有第三个参数，deep和immediate，可以加上看看效果

watch监听对象的某一个值

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

Nach dem Login kopieren

监听对象某一个属性的时候需要用箭头函数

watchEffect

关于watchEffect，官网是这么介绍的：为了根据响应式状态自动应用和重新应用副作用，我们可以使用watchEffect方法，它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。也就是说，我们并不需要传入一个特定的依赖源，而且它会立即执行一遍回调函数，如果函数产生了副作用，那它就会自动追踪副作用的依赖关系，自动分析出响应源。光看概念可能比较模糊，先来看个最简单的例子：

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

Nach dem Login kopieren

watchEffect副作用

副作用，那什么是副作用呢，其实很简单，就是在监听之前，我得做一件事。

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

Nach dem Login kopieren

监听之前让student.name赋值为'张三'，无论你输入什么值，name一直都是'张三'

停止监听

我们用同步语句创建的监听器，会自动绑定到组件实例上，并且会在组件卸载时自动停止，但是，如果我们在异步回调里创建一个监听器，那它就不会绑定到当前组件上，必须手动去停止，防止内存泄漏。那怎么去停止呢，其实我们只需要调用一下watch或watchEffect返回的函数

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

Nach dem Login kopieren

区别

用了一遍watch和watchEffect之后，发现他俩主要有以下几点区别：

watch是惰性执行的，而watchEffect不是，不考虑watch第三个配置参数的情况下，watch在组件第一次执行的时候是不会执行的，只有在之后依赖项变化的时候再执行，而watchEffect是在程序执行到此处的时候就会立即执行，而后再响应其依赖变化执行。
watch需要传递监听的对象，watchEffect
watchEffect

Über watchEffect wird es auf der offiziellen Website wie folgt vorgestellt: Um Nebenwirkungen entsprechend dem Reaktionsstatus automatisch anzuwenden und erneut anzuwenden, können wir die Funktion < verwenden code>watchEffect-Methode, die die eingehende Funktion sofort ausführt. Eine Funktion, die ihre Abhängigkeiten reaktiv verfolgt und die Funktion erneut ausführt, wenn sich ihre Abhängigkeiten ändern. Mit anderen Worten, wir müssen keine bestimmte Abhängigkeitsquelle übergeben und die Rückruffunktion wird sofort ausgeführt. Wenn die Funktion Nebenwirkungen erzeugt, verfolgt sie automatisch die Abhängigkeiten der Nebenwirkungen und analysiert automatisch die Antwortquelle. Schauen wir uns zunächst das einfachste Beispiel an: 🎜

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

// 停止监听
unwatch()

Nach dem Login kopieren

🎜watchEffect Side Effect🎜🎜Nebenwirkung, was ist eigentlich eine Nebenwirkung? muss eine Sache tun. 🎜rrreee🎜Weisen Sie student.name vor der Überwachung zu. Egal welchen Wert Sie eingeben, name wird immer „Zhang San“ sein🎜🎜Überwachung stoppen🎜🎜 Der Listener, den wir mit einer synchronen Anweisung erstellen, wird automatisch an die Komponenteninstanz gebunden und stoppt automatisch, wenn die Komponente entladen wird. Wenn wir jedoch einen Listener in einem asynchronen Rückruf erstellen, wird er nicht an die aktuelle Komponente gebunden muss manuell gestoppt werden, um Speicherlecks zu verhindern. Wie kann man es also stoppen? Tatsächlich müssen wir nur die von watch oder watchEffect zurückgegebene Funktion aufrufen > und Nach watchEffect habe ich festgestellt, dass sie die folgenden Hauptunterschiede aufweisen: 🎜

🎜watch wird träge ausgeführt . Aber watchEffect ist nicht vorhanden. Ohne Berücksichtigung des dritten Konfigurationsparameters von watch wird watch nicht ausgeführt, wenn die Komponente zum ersten Mal ausgeführt wird . wird es nur ausgeführt, wenn sich Abhängigkeiten später ändern, während watchEffect sofort ausgeführt wird, wenn das Programm hier ausgeführt wird, und dann als Reaktion auf Änderungen in seinen Abhängigkeiten ausgeführt wird. 🎜🎜
🎜watch muss das Überwachungsobjekt übergeben, watchEffect muss nicht 🎜🎜🎜

Das obige ist der detaillierte Inhalt vonAnalyse der Anwendungsbeispiele von watch und watchEffect in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!