Analysis of usage examples of watch and watchEffect in vue3

##watch

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

watchThere is also a third parameter, deep and immediate, you can add it to see the effect

watch monitoring object A certain value of

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

When monitoring a certain property of an object, you need to use the arrow function

watchEffect

About

watchEffect, The official website introduces it like this: In order to automatically apply and re-apply side effects based on the responsive state, we can use the watchEffect method, which immediately executes an incoming function, while responsively tracking its dependencies and updating its dependencies. Rerun this function when changed. In other words, we do not need to pass in a specific dependency source, and it will immediately execute the callback function. If the function produces side effects, it will automatically track the dependencies of the side effects and automatically analyze the response source. The concept may be vague just by looking at it. Let’s take a look at the simplest example first:

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

watchEffect Side Effects

Side effects, so what are side effects? In fact, it is very simple. Before monitoring, I have to Do one thing.

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

Before monitoring, let

student.name be assigned the value 'Zhang San'. No matter what value you enter, name will always be 'Zhang San'

Stop listening

The listener we create using synchronous statements will be automatically bound to the component instance and will automatically stop when the component is uninstalled. However, if we create a listener in an asynchronous callback, Then it will not be bound to the current component and must be stopped manually to prevent memory leaks. So how to stop it? In fact, we only need to call the function returned by

watch or watchEffect

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

// 停止监听
unwatch()

Difference

Use it once

After watch and watchEffect, I found that they have the following main differences:

• watch is executed lazily, while watchEffect No, without considering the third configuration parameter of watch, watch will not be executed when the component is executed for the first time, only after It will be executed when the dependencies change, while watchEffect will be executed immediately when the program is executed here, and then executed in response to its dependency changes.

• watchYou need to pass the monitoring object, watchEffectNot required

The above is the detailed content of Analysis of usage examples of watch and watchEffect in vue3. For more information, please follow other related articles on the PHP Chinese website!