Vue 3 通过 watch 函数来进行侦听多个数据的变化

Vue 3 通过 watch 函数来进行侦听数据的变化。在 Vue 3 中，我们可以使用以下方法来侦听多个数据源：

watch({ firstName: 'first', lastName: 'last' }, function (newValues, oldValues) {    // 新值和旧值的变化都会触发这个回调    console.log(newValues, oldValues);​​​​​​​})

可以看到，在这个 watch 函数中，我们可以传递一个对象，对象的属性对应的是我们要侦听的数据源的名称，而属性的值则是数据源对应的属性名。此外，还可以传递一个回调函数，用于在数据源发生变化时进行响应。

此外，如果我们要侦听一个数组中的数据变化，可以使用 deep 属性来进行深度侦听：

watch(() => { return myArray; }, function (newArray, oldArray) {  // 数组发生变化时触发这个回调  console.log(newArray, oldArray);}, {  deep: true​​​​​​​})

在这个 watch 函数中，我们首先返回了需要侦听的数组 myArray。在第三个参数中，我们传递了 deep: true，表示我们需要进行深度侦听。这样，当数组中的任意一个元素发生变化时，都会触发这个回调函数。

需要注意的是，Vue 3 中的 watch 函数是响应式的，这意味着如果我们在回调函数中修改了侦听的数据源，那么这个修改会再次触发 watch 函数。因此，在处理数据时需要注意循环依赖等问题。

本文链接：https://www.kjpai.cn/news/2024-03-31/151759.html，文章来源：网络cs，作者：欧阳逸，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！