Vue3でウォッチを使用する方法-Vue.js-php.cn

# 監視関数は、特定の値の変化を監視するために使用され、値が変化すると、対応する処理ロジックがトリガーされます。

1. ウォッチの基本的な例

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import {ref,reactive, watch} from &#39;vue&#39;
const count = ref(0)
function changCount(){
  count.value++
}
watch(count,(newValue,oldValue)=>{
  if(newValue){
    console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);
  }
})
</script>
 
<style>
 
</style>

ログイン後にコピー

2. ウォッチは複数のデータを監視します

ゲッター関数:

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`我是x与y之和${sum}`);
  }
);
</script>
 
<style>
</style>

ログイン後にコピー

複数のソースで構成される配列

<template>
  <div>
    <div>{{ x }}</div>
    <button @click="changCount">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const x = ref(1);
const y = ref(5);
function changCount() {
  x.value++;
}
watch(
  [x,y],
  ([x,y]) => {
    console.log(`我是x=>${x},我是y=》${y}`);
  }
);
</script>
 
<style>
</style>

ログイン後にコピー

3. 監視監視オブジェクトの値

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(()=>obj.value.name,(name)=>{
  console.log(name);
})
</script>
 
<style>
</style>

ログイン後にコピー

4. 監視リスナーの設定パラメータ

1.deep

は、詳細な監視を有効にするために使用されます

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true })
</script>
 
<style>
</style>

ログイン後にコピー

2.immediate

初期化検出を有効にするかどうか。デフォルトでは、値が変更された場合にのみリスナーのメソッドが実行されます。即時を有効にすると、初期化が 1 回実行されます。

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化
watch(obj,()=>{
  console.log(obj.value.name);
}, { deep: true,immediate:true })
</script>
 
<style>
</style>

ログイン後にコピー

5. watchEffect() による監視の簡素化

リスナーコールバックでは、ソースとまったく同じリアクティブ状態を使用するのが一般的です。例:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
watch(obj.value,()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

ログイン後にコピー

watchEffect 関数を使用して、上記のコードを簡素化できます。 watchEffect() コールバックのリアクティブな依存関係を自動的に追跡できるようにします。上記のリスナーは次のように書き換えることができます:

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="changObj">更改count的值</button>
  </div>
</template>
 
<script setup>
import { ref, reactive, watch, watchEffect } from "vue";
const obj = ref({name:&#39;你好&#39;})
function changObj(){
  obj.value.name+=&#39;我不好&#39;
}
// watch(obj.value,()=>{
//   console.log(obj.value.name);
// })
watchEffect(()=>{
  console.log(obj.value.name);
})
</script>
 
<style>
</style>

ログイン後にコピー

注: watchEffect コールバックはすぐに実行され、immediate

を指定する必要がないことに注意してください。 6. watch と watchEffect

watch と watchEffect は両方とも、副作用を伴うコールバックを事後的に実行できます。これらの主な違いは、リアクティブな依存関係を追跡する方法です。

watch は、明示的にリッスンされるデータソースのみを追跡します。コールバックでアクセスされたものは追跡されません。さらに、コールバックはデータソースが実際に変更された場合にのみ起動されます。 watch は副作用が発生したときに依存関係の追跡を回避するため、コールバック関数がいつトリガーされるかをより正確に制御できます。
watchEffect は、副作用の発生中に依存関係を追跡します。同期中に、アクセス可能なすべてのリアクティブプロパティが自動的に追跡されます。これはより便利で、コードがすっきりする傾向がありますが、リアクティブな依存関係が明確ではない場合があります。

7. コールバックトリガーメカニズムとリスナーの停止

リスナーコールバックで Vue によって更新された DOM にアクセスしたい場合は、flush: ' post を指定する必要があります。 ' オプション:

watch(source, callback, {
  flush: &#39;post&#39;
})
 
watchEffect(callback, {
  flush: &#39;post&#39;
})

ログイン後にコピー

Stop listen

setup() または

人気のチュートリアル

詳細>

Vue3でウォッチを使用する方法

1. ウォッチの基本的な例

2. ウォッチは複数のデータを監視します

ゲッター関数:

複数のソースで構成される配列

3. 監視監視オブジェクトの値

4. 監視リスナーの設定パラメータ

1.deep

2.immediate

5. watchEffect() による監視の簡素化

を指定する必要がないことに注意してください。 6. watch と watchEffect

7. コールバック トリガー メカニズムとリスナーの停止

7. コールバックトリガーメカニズムとリスナーの停止