vue3におけるwatchとwatchEffectの使用例の分析

##watch

watch は単一のデータを監視します

<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 は複数のデータを監視します

<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 listen オブジェクト

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

watch3 番目のパラメータ deep と immediate もあり、効果を確認するために追加できます

watch 監視オブジェクト特定の値

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

オブジェクトの特定のプロパティを監視する場合は、アロー関数

watchEffect

About

を使用する必要があります。 watchEffect、公式 Web サイトでは次のように紹介されています。応答状態に基づいて副作用を自動的に適用および再適用するには、受信した関数をすぐに実行する 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>

watchEffect Side Effects

Side Effects では、副作用とは何ですか? 実際、それは監視する前に、やるべきことが 1 つあります。

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

監視する前に、

student.name に値「Zhang San」を割り当てます。どのような値を入力しても、name は常に「Zhang San」になります。

リスニングの停止

同期ステートメントを使用して作成したリスナーは、コンポーネント インスタンスに自動的にバインドされ、コンポーネントがアンインストールされると自動的に停止します。ただし、非同期コールバックでリスナーを作成すると、 , その場合、現在のコンポーネントにバインドされなくなり、メモリ リークを防ぐために手動で停止する必要があります。では、これを停止するにはどうすればよいでしょうか? 実際には、

watch または watchEffect

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

// 停止监听
unwatch()

Difference

によって返される関数を呼び出すだけで済みます。一度使用してください。

watch と watchEffect を確認したところ、次の主な違いがあることがわかりました。

• watch は遅延実行されます。 while watchEffect いいえ、watch の 3 番目の構成パラメータを考慮しないと、コンポーネントが初めて実行されるときは watch は実行されません。 watchEffect は、ここでプログラムが実行されるとすぐに実行され、依存関係の変更に応じて実行されます。

• watch監視オブジェクト watchEffect必須ではありません

以上がvue3におけるwatchとwatchEffectの使用例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。