Analysis of usage examples of watch and watchEffect in vue3

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

Copy after login

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

Copy after login

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

Copy after login

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

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

Copy after login

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

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>

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

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

watch or watchEffect

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

// 停止监听
unwatch()

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!