watch函数的使用

函数的使用"/>

watch函数的使用

文章目录

• 一、watch函数
• • 1、作用：侦听一个或多个数据的变化，数据变化时执行回调函数，它有两个额外参数：immediate（立即执行）和deep（深度侦听）
  • 2、使用步骤
  • • （1）导入watch函数
    • （2）执行watch函数传入要侦听的响应式数据（ref对象）和回调函数
  • 3、immediate（立即执行）
  • 4、deep（深度侦听）
• 总结
• • watch函数

一、watch函数

1、作用：侦听一个或多个数据的变化，数据变化时执行回调函数，它有两个额外参数：immediate（立即执行）和deep（深度侦听）

2、使用步骤

（1）导入watch函数

（2）执行watch函数传入要侦听的响应式数据（ref对象）和回调函数

代码如下（示例）：

<script setup>
//1、导入watch函数
import { ref, watch } from 'vue'
const count = ref(0)//2、调用watch 侦听变化
watch(count,(newValue,oldValue) =>{console.log(`count发生了变化，旧值为${oldValue}，新值为${newValue}`);
})
</script>

这里导入ref和watch函数，ref将count转换为响应式的对象，watch接收两个参数，count和一个回调函数；watch对count的行为进行侦听，当count发生变化时则会触发回调函数，将信息打印在控制台上。

下面用一个例子进行演示，代码如下：

<script setup>
//1、导入watch函数
import { ref, watch } from 'vue'
const count = ref(0)
const setCount=()=>{count.value++
}//2、调用watch 侦听变化（监听单个数据源）
watch(count, (newValue, oldValue) => {console.log(`count发生了变化,旧值为${oldValue},新值为${newValue}`);
})
</script>
<template><button @click="setCount">+{{ count }}</button>
</template>

引入watch之后，对count的行为进行监听，设置一个按钮，绑定一个点击事件，按钮每次被点击都会触发setCount函数，使得count发生自增运算，每次count发生变化时，便会触发回调函数，将信息打印在控制台上

  上面讲的是侦听单个数据源，那我们该如何对多个数据源进行侦听呢？下面就跟着我一起来看看watch是如何对多个数据进行侦听的吧！！！
  首先，watch函数对单个数据和对多个数据进行侦听方法是毫无二致的，只要在watch对单个数据侦听的基础上略改一下就可以了，代码如下：

<script setup>
//1、导入watch函数
import { ref, watch } from 'vue'
const count = ref(0)
const setCount=()=>{count.value++
}const name = ref('cp')
const changeName =()=>{name.value = 'pc'
}
//2、调用watch 侦听count和name的变化
watch([count,name],([newCount, newName],[oldCount, oldName],) => {console.log('count或者name发生了变化', [newCount, newName],[oldCount, oldName]);
})
</script>
<template><button @click="setCount">+{{ count }}</button><button @click="changeName">+{{ name }}</button>
</template>

3、immediate（立即执行）

在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调，只需要在回调函数后面加上如下代码即可使用

{immediate:true
}

下面举个例子

<script setup>
import { ref,watch } from 'vue';const count = ref(0)
const setCount=()=>{count.value++
}
watch(count,      //侦听对象，第一个参数
()=>{console.log("count的值被改变了");
},                //回调函数，第二个参数     
{immediate:true
}                 //立即触发回调,第三个参数)
</script>
<template><button @click="setCount">+{{ count }}</button>
</template>

可以看到，在触发点击事件之前，侦听器创建时回调函数就被执行了一次，当我们希望程序在监听数据变化后立即执行回调函数，而不是等待下一次事件循环，这时就可以使用 immediate 选项。 这就是immediate的作用。

4、deep（深度侦听）

默认机制：通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项

<script setup>
import{ref,watch} from 'vue'
const Age=ref({age:0
})
const setAge=()=>{Age.value.age++
}
watch(Age,()=>{console.log("年龄发生了改变");
})
</script>
<template>{{ Age.age }}<button @click="setAge">onClick</button>
</template>

在上面代码中ref用Age接收了一个普通对象，并用watch对其进行监听，当点击按钮时，控制台却什么都没有，这时只需要开启deep选项即可，代码如下：

<script setup>
import{ref,watch,reactive} from 'vue'
const Age=reactive({age:0
})
const setAge=()=>{Age.age++
}
watch(Age,()=>{console.log("年龄发生了改变");
},
{deep:true   //开启深度侦听
})
</script>
<template>{{ Age.age }}<button @click="setAge">onClick</button>
</template>

当然， 用reactive函数来接收对象，则可以侦听到数据的变化，因为在Vue3中，reactive函数的深度侦听是默认开启的，代码如下:

<script setup>
import{ref,watch,reactive} from 'vue'
const Age=reactive({age:0
})
const setAge=()=>{Age.age++
}
watch(Age,()=>{console.log("年龄发生了改变");
},
{deep:true
})
</script>
<template>{{ Age.age }}<button @click="setAge">onClick</button>
</template>

运行出来的结果是一样的，这里我就不再附图了，接下来再看一下我们该如何实现精准侦听对象的某个属性，直接上代码：

<script setup>
import { watch } from 'vue';
import {ref} from 'vue'
const people=ref({    //定义两个属性name、agename:"靓仔",age:18
})
const changeName=()=>{people.value.name="喜仔"
}
const changeAge=()=>{people.value.age=20
}//精准侦听对象的某个具体属性
watch(() => people.value.name,      //箭头函数指定侦听的对象属性() =>{console.log('name变化了');    //当name发生改变时控制台输出此信息}
)
</script>
<template><p>当前名字为：{{ people.name}}</p><br><p>当前年龄为：{{ people.age}}</p><br><button @click="changeName">改名字</button><button @click="changeAge">改年龄</button>
</template>

  可以看到，上述代码中设置了两个按钮，分别绑定了 changeName 和 changeAge 方法，并且用watch函数进行监视,使用一个箭头函数 () => people.value.name 作为第一个参数，返回 people.value.name 的值，表示要监视这个属性。 定义了一个匿名箭头函数，用于在 people.value.name 的值发生变化时执行操作，当指定属性发生变化时执行回调。在上面代码中，点击改名字按钮，控制台会输出“name变化了”;而点击改年龄按钮，控制台不会输出任何东西

今天的分享就到这了，感谢各位宝子们的阅读，有问题希望大家能够指出，谢谢！！

总结

watch函数

• 导入watch函数；
• 执行watch函数传入要侦听的响应式数据（ref对象）和回调函数；
• 单个数据侦听和多个数据侦听；
• 两个参数：immediate（立即执行）和deep（深度侦听）；
• 不开启深度侦听，直接修改嵌套属性不能触发回调，使用精准侦听对象属性可以触发回调。