【Vue3从零开始-第六章】6-6 compositionAPI中的watch和watchEffect的使用（上）

2022-09-27 130

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第六章】6-6 compositionAPI中的watch和watchEffect的使用（上）

]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

侦听单个数据值

setup(){
  const { ref, watch } = Vue
  const name = ref('Jack')
  watch(name, (curVal, preVal) => {
    console.log(curVal, preVal)
  })
  return{
    name
  }
},
复制代码

watch侦听器函数会接收两个参数，一个是侦听的数据，还有一个回调函数。

回调函数中也有两个参数，和基础知识里面的watch侦听器一样：当前值和原始值。

${_RYT8U@2~VWJRDXA1G7$NS.png$

通过页面看出来的效果会发现，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
  }
},
复制代码

$4A(D$OEU3{[I_0(DP%(K2~H.png$

当刷新浏览器时，控制台会报一个错误信息，提示我们侦听的内容不能采用obj.xxx的方式去写。

也就是当我们侦听一个对象中的数据值时，可以使用一个箭头函数的方式去写。

watch(() => nameObj.name, (curVal, preVal) => {
    console.log(curVal, preVal)
})
复制代码

{6SYZDEB}$BXB33KLB9XJEY.png

由此可见，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)
})
复制代码