watch 监听问题

Question

老师，您好，我刚刚看到您的课程 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 对应的事情

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

Answer 1

张轩 2020-09-25 16:19:30

同学你好 

首先你还可以使用类似 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 #1

  哦，哦，明白了，谢谢

Answer 2

Lemon甜橙君 2020-09-25 16:07:44

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

• 张轩 #1

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