違い
- watch は特定のデータ ソースをリッスンし、別のコールバック関数で副作用を実行する必要があります。
- watchEffect (高度な監視) は、渡された関数をただちに実行し、その依存関係を事後的に追跡し、依存関係が変更されたときに関数を再実行します。
時計の使い方
watch の最初のパラメータは監視ソースです。watch
の 2 番目のパラメータはコールバック関数 cb(newVal, oldVal) です。watch の
3 番目のパラメータはオプション設定項目であり、オブジェクト { immediate:true // を呼び出すかどうかです。一度すぐにdeep:true //深度モニターを有効にするかどうか}
時計はリファレンスを聞く
<template>
<div>
case1:<input v-model="message1" type="text" id="1">
<span>{
{message1}}</span>
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue'
let message1=ref<string>('12');
watch(message1, (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
},{
immediate:false,
deep:true
})
</script>
<style>
</style>
watch は複数の ref をリッスンします
<template>
<div>
case1:<input v-model="message1" type="text">
<span>{
{message1}}</span>
<hr>
case2:<input v-model="message2" type="text"><span>{
{message2}}</span>
</div>
</template>
<script setup lang="ts">
import {
ref, watch } from 'vue'
let message1=ref<string>('12');
let message2=ref<string>('34');
watch([message1,message2], (newVal, oldVal) => {
console.log('新的值----', newVal);
console.log('旧的值----', oldVal);
},{
immediate:false,
deep:true
})
</script>
<style>
</style>
ウォッチリッスンリアクティブ
- リアクティブを使用して深いオブジェクトをリッスンすると、深いオブジェクトをオンにするのと、深いオブジェクトをオンにしないのと同じ効果があります。
<template>
<input type="text" v-model="message.nav.bar.name">
</template>
<script setup lang="ts">
import {
ref, watch,reactive } from 'vue'
let message=reactive({
nav:{
bar:{
name:""
}
}
})
watch(message,(newVal,oldVal)=>{
console.log(newVal,oldVal);
})
</script>
<style>
</style>
watch はリアクティブペアの単一の値をリッスンします
let message=reactive({
nav:{
bar:{
name:""
}
}
})
watch(()=>message.nav.bar.name,(newVal,oldVal)=>{
console.log(newVal,oldVal);
})
watchEffect の使用
<template>
<h2>姓名：{
{ Person.name }}</h2>
<button @click="Person.name += '~'">修改</button>
<button @click="stop">停止</button>
</template>
<script setup lang="ts">
import {
ref, watch, reactive, watchEffect } from 'vue'
const Person = reactive({
name: '张三'
})
//监听御前清理oninvalidate参数,加上stop后停止监听
const stop=watchEffect((oninvalidate) => {
oninvalidate(() => {
console.log("before");
});
Person.name
console.log('姓名发送了变化'+Person.name);}
,{
flush:"sync",//pre:组件更新前执行 sync:强制效果始终同步触发 post:组件更新后执行
onTrigger () {
console.log("我是onTrigger")
}
})
</script>
<style>
</style>
実行結果: 停止ボタンをクリックした後、person.name の変更は監視されず、コンソールには person.name の結果が出力されません。