Vue 如何监听数据

在 Vue 开发中，监听数据变化是一项非常重要的技能，它能让我们根据数据的变动做出相应的操作，极大地增强了应用的交互性和动态性。Vue 提供了多种监听数据的方式。

首先是 watch 选项。这是最常用的监听方法之一。通过在组件中定义 watch 对象，我们可以对特定的数据进行监听。例如：

export default {
  data() {
    return {
      message: '初始值'
    }
  },
  watch: {
    message(newValue, oldValue) {
      console.log('消息变化了，新值：', newValue, '旧值：', oldValue);
    }
  }
}

在这个例子中，watch 监听了 message 数据的变化。当 message 的值发生改变时，对应的回调函数就会被触发，我们可以在回调函数中执行任何需要的操作，比如更新 UI、发送网络请求等。

除了监听单个数据，watch 还支持深度监听。如果数据是一个对象或数组，默认情况下 Vue 不会递归地监听其内部属性的变化。这时我们可以使用 deep 选项开启深度监听：

watch: {
  userInfo: {
    handler(newValue, oldValue) {
      console.log('用户信息变化了');
    },
    deep: true
  }
}

这样，即使 userInfo 对象内部的属性发生变化，也能被监听到。

另一种监听数据的方式是计算属性 computed。虽然它主要用于基于已有数据计算出新的值，但它也有监听的特性。计算属性会自动缓存，只有在其依赖的数据发生变化时才会重新计算。例如：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

这里 reversedMessage 依赖于 message，当 message 变化时，reversedMessage 会自动重新计算。

Vue 3 中还引入了 watchEffect 函数。它可以自动追踪响应式数据的依赖，只要依赖的数据发生变化，就会触发回调。例如：

import { watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log('count 变化了，当前值：', count.value);
});

watchEffect 不需要明确指定监听的数据源，它会自动分析回调函数中使用的响应式数据并进行监听。

掌握这些 Vue 监听数据的方法，能让开发者更灵活地处理数据变化，打造出更加高效、动态的前端应用。