vue3中如何使用 watch 函数来观察响应式数据的变化

原创

国服第二切图仔

发布于 2024-06-15 22:40:26

1060

发布于 2024-06-15 22:40:26

文章被收录于专栏：jsjs

前言

在 Vue 3 中，可以使用 watch 函数来观察响应式数据的变化。这个函数可以在组件的 setup 函数中使用。watch()方法还可以实现更多复杂的功能，比如异步获取数据并在数据更新时重新渲染页面。

代码示例

1、以下是一个使用 Vue 3 watch 函数的简单示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, watch, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    
    // 定义一个方法用于增加 count
    function increment() {
      count.value++;
    }

    // 使用 watch 函数来观察响应式数据 count 的变化
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
      increment,
    };
  },
});
</script>

2、多个变量的监听：

除了单个变量的监听，watch()还可以监听多个变量的变化，以及获取旧值/新值的情况。

多个变量的监听：

   // 使用 watch 函数来观察响应式数据 count 的变化
    watch([count1,count2], ([newcount1, newcount2],[oldcount1,oldcount2]) => {
      console.log(`Count changed from ${oldcount1} to ${newcount1}`);
      console.log(`Count changed from ${oldcount2} to ${newcount2}`);
    },
{deep:true}
);