持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

在上一篇的文章中，我们一起学习了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>

侦听单个数据值

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侦听器的使用方法，由于本章节内容较多，所以还有部分内容会放到下一章节中去和大家一起学习。

不知道大家对于侦听多个数据值的内容是否能了解，所以希望大家在看的时候可以顺便敲一敲代码哦。大家加油💪🏻💪🏻