vue3中watch的用户

chencaw

于 2021-11-25 11:46:35 发布

阅读量379

点赞数

分类专栏： vue3 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/chencaw/article/details/121534365

版权

vue3 专栏收录该内容

16 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
      }
    );