watch 监听问题

来源：3-11 侦测变化 - watch

zjc_Dream

2020-09-25

老师，您好，我刚刚看到您的课程 watch 监听部分，您课程中讲解的 watch 监听多个值的变化使用数组的形式去监听，但是我监听多个不同的值，每个值改变之后怎么去一一对应它对应的要执行的方法？

vue2.x 里面可以写成
watch: {
myNum(newVal, oldVal) { // 要执行的方法 },
myStr(newVal, oldVal) { // 要执行的方法 }
}

vue3.x里面监听多个值
const myNum = ref(0)
const myStr = ref(‘zhang san’)
watch( [ myNum, myStr ], ( newVal, oldVal ) => {
// 监听到 myNum 的值改变之后需要做的事情
xxx
// 监听到 myStr 的值改变之后需要做的事情
xxx
} )

上面这种情况怎么去一一给它对应呢？
当监听到 myNum 的值改变之后，我只想去做 myNum 对应的事情

监听到 myStr 的值改变之后只去做 myStr 对应的事情

听完您讲的之后这块不是很明白

写回答

2回答

张轩

2020-09-25

已采纳

同学你好

首先你还可以使用类似 vue2 的写法，写多个 watch 完成一样的效果。

watch(myNum, () => {} )

watch(myStr, () => {} )

当监听多个值的话，由于其中的一个值变化就会影响整个回调函数触发，假如你想在里面判断具体是哪个值变化，需要自己写表达式去判断。

比如

watch([myNum, myStr], (newVal, oldVal) => {
    if (newVal[0] !== oldVal[0]) {
        // 第一个值变化了 搞事情
    }
})

给你写了个例子，可以看看

https://codesandbox.io/s/sweet-chatelet-9ilnc?file=/src/App.vue

zjc_Dream

哦，哦，明白了，谢谢

2020-09-25

共1条回复

Lemon甜橙君

2020-09-25

我的理解视频里是同时对myNum和MyStr进行watch时，一起发生的改变，如果你想对他俩单独watch并且互不干扰的话，直接写两个watch()就好了啊，一个watch(myNum)另一个watch(myStr)，这不是就是和Vue2中在watch里监听2个变量是一样的效果么

张轩

同学你还真是个回答问题的小能手～

2020-09-25

共1条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

watch侦听器

回答 1

老师关于 computed 和 watch ，我没弄明白，能讲解一下吗

回答 1

怎么在.vue中获取异步数据

回答 2

Axios 赋值问题：子组件 props接收一个数组如何在setup里打印出来

回答 1

请问watch可以监听一个对象吗？

回答 1

打开慕课网App查看更多内容