watch()のデフォルトは遅延リスニングです。つまり、コールバック関数はリスニング ソースが変更された場合にのみ実行されます。
最初のパラメータはリスナーのソースです。このソースは次のいずれかになります。
- 1 つの関数、1 つの戻り値
- 参照者
- リアクティブ オブジェクト (reactive によって定義)
- ...または上記の型の値の配列
2 番目のパラメーターはコールバック関数で、新しい値 (newValue)、古い値 (oldValue)、および副作用クリーンアップ用のコールバック関数の 3 つのパラメーターを受け取ることができます。
3 番目のパラメーターはオプションのパラメーターで、deep (詳細な監視)、immediate (作成時に 1 回監視) などのオブジェクト構造です。
ref で定義されたリアクティブ データを監視する
<template>
<div>
<h2>{
{name}}</h2>
<button @click="name += '666'">修改姓名</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let name = ref('小明')
watch(name,(newValue, oldValue)=>{
console.log('修改了name',newValue,oldValue);
})
return {
name
}
}
}
</script>
モニタリング参照は複数の応答データを定義します
複数の応答データを定義します。渡される最初のパラメーターは配列の形式でマルチラップされます。
<template>
<div>
<h2>{
{name}}</h2>
<button @click="name += '666'">修改姓名</button>
<h2>{
{age}}</h2>
<button @click="age++">增长年龄</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let name = ref('小明')
let age = ref(18)
watch([name,age],(newValue, oldValue)=>{
console.log('修改了',newValue,oldValue);
})
return {
name,
age
}
}
}
</script>
reactive で定義されたレスポンシブ データのすべての属性を監視します
注意点:
- リアクティブデータでは古い値（oldValue）が正しく取得できません
- ディープ監視は強制的にオンになります (ディープ属性を閉じることは無効です!!!)
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch(data,(newValue, oldValue)=>{
console.log('修改了data',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>
<style lang="scss" scoped>
</style>
印刷結果から、新しい値は古い値とまったく同じであることがわかり、古い値は監視できません（正式なフォローアップバージョンを待っています）
上記のコードでは deep 属性を false に設定していますが、印刷結果は監視できるため、deep 属性は無効です
reactiveで定義されたレスポンシブデータの特定のデータを監視します
watchのパラメータ1が値を読み取るメソッドを使用している場合、警告が表示され、操作は利用できませんが、特定のデータを監視するにはどうすればよいですか?
パラメーター 1 では、関数を構成し、戻り値で渡す必要があります。
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch(()=>data.age,(newValue, oldValue)=>{
console.log('修改了data中的年龄',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>
コードに書いたウォッチのパラメータ1の戻り値の設定がわかると思います。
reactive で定義されたレスポンシブデータの一部のデータを監視します
前の監視リファレンスを読んで、複数の応答データを定義し、reactive で定義されたリアクティブ データの特定のデータを監視する場合、その書き方、つまり配列でラップし、配列関数に複数を記述して返す方法がわかるかもしれません。応答データ
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch([()=>data.age,()=>data.name],(newValue, oldValue)=>{
console.log('修改了data中的年龄',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>