Vue Composition API 中监测组件属性变化的详细指南

2024-03-07 08:45:02

如何在 Vue Composition API 中监测组件属性的变化？

介绍

Vue Composition API 提供了 watch 模块，用于监测响应式数据的变化。然而，关于如何监测组件属性的变化，却鲜有提及。本文将深入探讨如何在 Vue Composition API 中监测组件属性的变化，并提供详细的代码示例。

监测组件属性

步骤：

导入 watch 模块。
创建 watch 函数：
- 第一个参数：观察目标（组件属性、响应式数据或函数）。
- 第二个参数：回调函数（在观察目标变化时调用）。
指定观察目标：目标可以是组件属性、响应式数据或函数。
定义回调函数：该函数在观察目标发生变化时被调用。
使用 watch 函数：将观察目标和回调函数作为参数传入 watch 函数。

代码示例

以下代码示例演示了如何在 Vue Composition API 中监测组件属性的变化：

<template>
  <div>
    <img src="./assets/logo.png">
    <PropWatchDemo :selected="testValue"/>
  </div>
</template>

<script>
import { createComponent, onMounted, ref, watch } from "@vue/composition-api";
import PropWatchDemo from "./components/PropWatchDemo.vue";

export default createComponent({
  name: "App",
  components: {
    PropWatchDemo
  },
  setup: () => {
    const testValue = ref("initial");

    onMounted(() => {
      setTimeout(() => {
        testValue.value = "changed";
      }, 3000);
    });

    watch(testValue, (first, second) => {
      console.log("Watch function called with args:", first, second);
    });

    return {
      testValue
    };
  }
});
</script>

<template>
  <select v-model="selected">
    <option value="null">null value</option>
    <option value>Empty value</option>
  </select>
</template>

<script>
import { createComponent, ref, watch } from "@vue/composition-api";

export default createComponent({
  name: "MyInput",
  props: {
    selected: {
      type: [String, Number],
      required: true
    }
  },
  setup: (props) => {

    watch(() => {
      console.log("Watch function called");
    });

    watch(props, (first, second) => {
      console.log("Watch props function called");
    })

    watch(props.selected, (first, second) => {
      console.log(
        "Watch props.selected function called"
      );
    });

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