Vue3 监听属性

Vue3 监听属性

Vue.js 是一个流行的前端框架，用于构建用户界面和单页应用程序。Vue3 是 Vue.js 的最新版本，它引入了许多新特性和改进，使得开发更加高效和灵活。在 Vue3 中，监听属性（Watchers）是一种响应式数据的变化，执行特定操作的功能。本文将详细介绍 Vue3 中的监听属性，包括基本用法、高级用法和实际应用场景。

监听属性的基本用法

在 Vue3 中，监听属性可以通过 watch 选项或 watchEffect 函数来实现。watch 选项允许我们监视特定数据源的变化，并在变化时执行回调函数。数据源可以是组件的属性、计算属性或反应式引用。

使用 watch 选项

在 Vue3 组件中，我们可以使用 watch 选项来监视一个反应式数据源。当数据源发生变化时，watch 选项中的回调函数将被调用。下面是一个简单的例子：

<template>
  <div>
    <input v-model="message" placeholder="输入消息">
    <p>消息: {{ message }}</p>
  </div>
</template>

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

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

    watch(message, (newValue, oldValue) => {
      console.log('消息已更改:', oldValue, '->', newValue);
    });

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

在这个例子中，我们使用 ref 函数创建了一个响应式引用 message。然后，我们使用 watch 函数监视 message 的变化，并在控制台打印出新旧值。

使用 watchEffect 函数

watchEffect 函数是 Vue3 中的一个新特性，它立即执行传入的函数，并响应式地追踪其依赖项。当依赖项发生变化时，watchEffect 将重新执行。下面是一个使用 watchEffect 的例子：

<template>
  <div>
    <input v-model="message" placeholder="输入消息">
    <p>消息: {{ message }}</p>
  </div>
</template>

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

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

    watchEffect(() => {
      console.log('消息已更改:', message.value);
    });

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

在这个例子中，我们使用 watchEffect 函数来监视 message 的变化。与 watch 不同，watchEffect 不需要明确指定依赖项，它会自动跟踪在回调函数中访问的所有响应式属性。

监听属性的高级用法

Vue3 中的监听属性还支持一些高级功能，如深度监听、立即执行和回调函数的清除功能。

深度监听

在某些情况下，我们可能需要监视对象或数组内部的变化。这时，我们可以使用 watch 选项的 deep 属性来实现深度监听。下面是一个例子：

<template>
  <div>
    <input v-model="obj.a" placeholder="输入 a 的值">
    <p>a: {{ obj.a }}</p>
  </div>
</template>

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

export default {
  setup() {
    const obj = reactive({ a: '' });

    watch(obj, (newValue, oldValue) => {
      console.log('对象已更改:', oldValue, '->', newValue);
    }, {
      deep: true
    });

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

在这个例子中，我们使用 reactive 函数创建了一个响应式对象 obj。然后，我们使用 watch 函数监视 obj 的变化，并设置 deep 属性为 true，以实现深度监听。

立即执行

在某些情况下，我们可能需要在监听器创建后立即执行回调函数。这时，我们可以使用 watch 选项的 immediate 属性来实现立即执行。下面是一个例子：

<template>
  <div>
    <input v-model="message" placeholder="输入消息">
    <p>消息: {{ message }}</p>
  </div>
</template>

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

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

    watch(message, (newValue, oldValue) => {
      console.log('消息已更改:', oldValue, '->', newValue);
    }, {
      immediate: true
    });

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

在这个例子中，我们使用 watch 函数监视 message 的变化，