<template> <input type="text" v-model="text1" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') watch(text1, (newVal, oldVal) => { console.log('监听单个数据', newVal, oldVal) }) </script>
<template> <input type="text" v-model="text1" /> <input type="text" v-model="text2" /> </template> <script setup> import { ref, watch } from 'vue' const text1 = ref('') const text2 = ref('') watch([text1, text2], (newVal, oldVal) => { console.log('监听一组数据', newVal, oldVal) }) </script>
<template> name: <input type="text" v-model="student.name" /> age: <input type="number" v-model="student.age" /> </template> <script setup> import { reactive, watch } from 'vue' const student = reactive({ name: '', age: '' }) watch(student, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', newVal) }) </script>
watch3 番目のパラメータ
deep と
immediate もあり、効果を確認するために追加できます
<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 'vue' const student = reactive({ name: '', age: '' }) watch(() => student.name, (newVal, oldVal) => { console.log('newVal', newVal) console.log('oldVal', newVal) }, { deep: true, immediate: true }) </script>
オブジェクトの特定のプロパティを監視する場合は、アロー関数
watchEffectAbout を使用する必要があります。 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 'vue' const student = reactive({ name: '', age: '' }) watchEffect(() => { console.log('name: ',student.name, 'age: ', 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 'vue' const student = reactive({ name: '', age: '' }) watchEffect((oninvalidate) => { oninvalidate(() => { student.name = '张三' }) console.log('name: ', student.name) }, { // pre 组件更新前; sync:强制效果始终同步; post:组件更新后执行 flush: 'post' // dom加载完毕后执行 }) </script>
student.name に値「Zhang San」を割り当てます。どのような値を入力しても、
name は常に「Zhang San」になります。
watch または
watchEffect
const stop = watchEffect(() => {}) // 停止监听 unwatch()
watch と
watchEffect を確認したところ、次の主な違いがあることがわかりました。
watch は遅延実行されます。 while
watchEffect いいえ、
watch の 3 番目の構成パラメータを考慮しないと、コンポーネントが初めて実行されるときは
watch は実行されません。
watchEffect は、ここでプログラムが実行されるとすぐに実行され、依存関係の変更に応じて実行されます。
watch監視オブジェクト
watchEffect必須ではありません
以上がvue3におけるwatchとwatchEffectの使用例の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。