如何更好地理解 Vue 3 watch 侦听器的用法

news2024/11/19 13:18:09

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. watch的基本用法🔧
  - 2. watch的多种用法🌟
  - 3. watch的案例🌐
- 总结：
- 参考资料：

标题：🕵️‍♀️

摘要：

本文将介绍Vue 3中watch侦听器的多种用法和案例，以及它在实际开发中的应用。

引言：

在Vue 3中，watch侦听器用于监听数据的变化，并在数据变化时执行相应的操作。了解watch侦听器的用法和案例对于Vue开发者来说具有重要意义。

正文：

1. watch的基本用法🔧

在 Vue 3 中，watch 函数是一个非常有用的工具，用于在数据变化时执行一些操作。以下是一些基本的用法：

创建一个 ref 或 reactive 对象来存储需要监听的数据。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello, Vue 3!');

    // ...
  }
};

使用 watch 函数来监听数据的变化。watch 函数接收两个参数：一个是要监听的数据的引用，另一个是当数据发生变化时要调用的回调函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const message = ref('Hello, Vue 3!');

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    watch(message, (newValue, oldValue) => {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    });

    // ...
  }
};

如果需要在数据变化时执行异步操作，可以将回调函数设置为 async。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    async function increment() {
      count.value++;
      await fetchData();
    }

    watch(count, async (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    // ...
  }
};

如果需要在数据变化时执行一个函数，但不需要记录旧值和新值，可以将第二个参数设置为 true。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    watch(count, increment, { deep: true });

    // ...
  }
};

这些示例展示了如何在 Vue 3 中使用 watch 函数来监听数据的变化。通过这些示例，你可以更好地理解 watch 函数的用法。

2. watch的多种用法🌟

watch侦听器具有多种用法，以下是一些常见的用法：

监听基本数据类型：用于监听基本数据类型的变化；
监听对象和数组：用于监听对象和数组的变化；
监听函数：用于监听函数的变化；
监听多个数据：用于同时监听多个数据的变化。

3. watch的案例🌐

在实际开发中，watch侦听器可以用于多种场景，以下是一些典型的案例：

使用 watch 侦听器监听数据变化，制作一个动态标题生成器

<template>
  <div>
    <input v-model="title" placeholder="输入标题" />
    <h1>{{ title }}</h1>
  </div>
</template>

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

export default {
  setup() {
    const title = ref('');

    watch(title, (newVal, oldVal) => {
      console.log(`标题从 "${oldVal}" 变为 "${newVal}"`);
    });

    return {
      title
    };
  }
};
</script>

使用 watch 侦听器监听数据变化，实现一个动态背景颜色切换器

<template>
  <div :style="{ backgroundColor: bgColor }">
    <button @click="changeBgColor">切换背景颜色</button>
  </div>
</template>

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

export default {
  setup() {
    const bgColor = ref('');

    watch(bgColor, (newVal, oldVal) => {
      console.log(`背景颜色从 "${oldVal}" 变为 "${newVal}"`);
    });

    function changeBgColor() {
      bgColor.value = bgColor.value === 'red' ? 'blue' : 'red';
    }

    return {
      bgColor,
      changeBgColor
    };
  }
};
</script>

使用 watch 侦听器监听数据变化，实现一个动态加载图片的标题

<template>
  <div>
    <input v-model="imageUrl" placeholder="输入图片URL" />
    <img :src="imageUrl" alt="动态图片" />
  </div>
</template>

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

export default {
  setup() {
    const imageUrl = ref('');

    watch(imageUrl, (newVal, oldVal) => {
      console.log(`图片URL从 "${oldVal}" 变为 "${newVal}"`);
    });

    return {
      imageUrl
    };
  }
};
</script>