watch 数据监听

监听事件

Vue 3 提供了两个重要的 API 来处理响应式数据：watchEffect() 和 watch()。

`watchEffect()`

watchEffect() 是一个用于监听响应式数据变化的 API。它会立即执行传入的回调函数，并自动追踪其中使用的响应式数据，当响应式数据变化时，回调函数会被再次执行。

以下是一个示例：

vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from "vue";

const message = ref("Hello, Vue 3!");

const changeMessage = () => {
  message.value = "Hello, World!";
};

watchEffect(() => {
  console.log(`消息发生变化: ${message.value}`);
});
</script>

示例中创建了一个名为 message 的响应式变量，并在页面中渲染了这个变量的值。每当用户点击 "改变消息" 按钮时，message 的值都会改变，并且 watchEffect() 中的回调函数会被触发。

注意事项：

watchEffect() 中的回调函数会在组件初始化时被执行一次，以及在其中使用的响应式数据发生变化时被再次执行。
watchEffect() 自动追踪所使用的响应式数据，无需手动声明依赖。

`watch()`

watch() 是一个更精确控制的 API，它可以监听指定的响应式数据，并在数据变化时执行回调函数。与 watchEffect() 不同，watch() 需要指定要监听的响应式数据，并手动声明依赖关系。以下是一个示例：

vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="inputValue" placeholder="输入新消息" />
  </div>
</template>

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

const message = ref("Hello, Vue 3!");
const inputValue = ref("");

watch(inputValue, (newValue, oldValue) => {
  message.value = newValue;
  console.log(`输入框的值发生变化: ${newValue}`);
});
</script>

示例中创建了一个双向绑定的输入框，并声明了一个名为 inputValue 的变量来存储输入框的值。通过 watch() 监听 inputValue 的变化，并在回调函数中将新值赋给 message 变量。

注意事项：

watch() 第一个参数可以是一个响应式数据、计算属性或 ref 对象。
watch() 第二个参数是一个回调函数，接收新值和旧值作为其参数。

提示

在 watchEffect() 或 watch() 中定义的变量必须是通过 ref() 包裹的响应式数据。
ref() 返回一个包装过的 Proxy 对象，访问和修改它的值时，需要使用 .value 来获取和设置真实的值。

watch 数据监听 ​

watchEffect() ​

watch() ​

watch 数据监听

`watchEffect()`

`watch()`