vue3中watch的用户

最新推荐文章于 2025-12-22 21:38:10 发布

原创最新推荐文章于 2025-12-22 21:38:10 发布 · 396 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

vue3 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue.js中如何使用watch进行数据监听。首先展示了单个变量的监听，当`arrangeorder.data.devid`变化时，会触发回调并打印新值。接着详细讲解了如何监听多个变量，如`shiftTime.value`和`nowDateStr.value`，在值改变时，回调将分别输出新的和旧的值，强调了新旧值在数组中的顺序。这有助于开发者理解和掌握Vue中数据变化的响应式处理。

1、单个变量watch，新旧变量依次的顺序

import { reactive, ref, watch} from "vue";

..................
export default {
  name: 'xxxxx',
  setup() {
      watch(
      () => arrangeorder.data.devid,
      (newvalue,oldvalue) => {
        console.log("watchsssssss");
        console.log(newvalue);
                
      }
    );
  }

2、多个变量，注意[]中的顺序！！！所有新的在前[]，所有旧的在后，下面演示了2个变量

    watch(
      () => [shiftTime.value,nowDateStr.value],
      ([newshiftTimevalue,newnowDateStrvalue],[oldshiftTimevalue,oldnowDateStrvalue]) => {
        console.log("watchsssssss11");
        console.log( newshiftTimevalue)
        console.log(newnowDateStrvalue)
      }
    );