![]UWOD(KIB9LJS9~S[T{QHM9.png](https://ucc.alicdn.com/pic/developer-ecology/9356c4b7374b4789bda9f69674fc95ab.png?x-oss-process=image/resize,w_1400/format,webp "]UWOD(KIB9LJS9~S[T{QHM9.png")
前言
在上一篇的文章中，我们一起学习了compositionAPI中的计算属性computed，本篇文章中我们继续学习compositionAPI中的watch和watchEffect。
回顾
在【Vue3从零开始】前面几章基础知识的章节中也有学习过watch侦听器的概念，我们可以在vue实例中直接使用watch去侦听某个值的变化，并输出当前值和原始值。
<script> const app = Vue.createApp({ data(){ return { count: 1 } }, watch: { count(curVal, preVal){ console.log(curVal, preVal) } }, template: ` <div> <span>{{count}}</span> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
- 当我们在控制台改变
count的值时，控制台就会输出watch中打印出来的当前值和原始值了。
setup中使用watch
为了更加直观的看出效果，我们直接在页面上使用input标签做一个双向数据绑定，并在页面上显示双向数据绑定的值。
<script> const app = Vue.createApp({ setup(){ const { ref } = Vue const name = ref('Jack') return{ name } }, template: ` <div> 姓名：<input v-model="name" /> <div> 我的姓名是：{{name}} </div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
![W~Q{`[ANE]{W{UOS`0{8~V2.png](https://ucc.alicdn.com/pic/developer-ecology/16d03c7956304b86ac11b9eb194aa07a.png?x-oss-process=image/resize,w_1400/format,webp "W~Q{`[ANE]{W{UOS`0{8~V2.png")
侦听单个数据值
setup(){ const { ref, watch } = Vue const name = ref('Jack') watch(name, (curVal, preVal) => { console.log(curVal, preVal) }) return{ name } }, 复制代码
watch侦听器函数会接收两个参数，一个是侦听的数据，还有一个回调函数。
- 回调函数中也有两个参数，和基础知识里面的
watch侦听器一样：当前值和原始值。
通过页面看出来的效果会发现，
compositionAPI中的watch侦听器和基础知识点里面的watch侦听器都有一样的特性：①具备一定的惰性（当页面初次加载时，是无法触发watch侦听器的），②参数可以拿到原始值和当前值。
侦听对象数据值
为了不改变页面上绑定的数据值，我们使用了前面章节中学习过的toRefs函数来解构对象中的参数。
setup(){ const { reactive, watch, toRefs } = Vue const nameObj = reactive({name: 'Jack'}) watch(nameObj.name, (curVal, preVal) => { console.log(curVal, preVal) }) const { name } = toRefs(nameObj) return{ name } }, 复制代码
- 当刷新浏览器时，控制台会报一个错误信息，提示我们侦听的内容不能采用
obj.xxx的方式去写。
也就是当我们侦听一个对象中的数据值时，可以使用一个箭头函数的方式去写。
watch(() => nameObj.name, (curVal, preVal) => { console.log(curVal, preVal) }) 复制代码
由此可见，
watch侦听器的第一个参数还可以是一个函数。
侦听多个对象数据值
<script> const app = Vue.createApp({ setup(){ const { reactive, watch, toRefs } = Vue const nameObj = reactive({name: 'Jack', job: 'JueJin'}) watch(() => nameObj.name, (curVal, preVal) => { console.log(curVal, preVal) }) watch(() => nameObj.job, (curVal, preVal) => { console.log(curVal, preVal) }) const { name, job } = toRefs(nameObj) return{ name, job } }, template: ` <div> <div> 姓名：<input v-model="name" /> <div> 我的姓名是：{{name}} </div> </div> <div> 工作：<input v-model="job" /> <div> 我的工作是：{{job}} </div> </div> </div> ` }); const vm = app.mount('#root'); </script> 复制代码
❓ 如果我们需要侦听多个数据值时，我们是不是需要写多个watch侦听器函数呢？
其实watch侦听器也给了解决方案，在接收的参数中是支持数组类型的，所以如果是多个数据值，我们可以放在一个数组中接收，当然获取当前值和原始值时，也会是一个数组了。
watch([() => nameObj.name, () => nameObj.job], ([curNameVal, curJobVal], [preNameVal, preJobVal]) => { console.log(curNameVal, preNameVal + '-----' + curJobVal, preJobVal) }) 复制代码
- 第一个参数中的数组接收了两个函数，分别返回对象中的
name和job。
- 第二个参数中接收了两个数组，分别是所有当前值和所有的原始值。
- 输出的结果和写多个
watch监听器函数的结果是一样的。
compositionAPI中的watch侦听器有一个区别于基础知识里面的watch侦听器，那就是compositionAPI中的侦听器支持多个数据值的侦听。
总结
本篇文章主要和大家一起学习了compositionAPI中的watch侦听器的使用方法，由于本章节内容较多，所以还有部分内容会放到下一章节中去和大家一起学习。
不知道大家对于侦听多个数据值的内容是否能了解，所以希望大家在看的时候可以顺便敲一敲代码哦。大家加油💪🏻💪🏻
