Vue3中监听props变化的三种实现方案-牛站云

Vue3在组件化开发中引入了更灵活的响应式系统，使得props与组件状态之间的联动更加清晰。但在实际项目中，props变化的监听依然是高频需求，尤其是在表单联动、接口请求触发、数据同步等场景下。合理选择监听方式，不仅影响代码结构，也会影响性能与可维护性。

通过watch直接监听props属性

最常见的方式是使用Composition API中的watch函数直接监听props中的某个字段。这种方式适用于明确知道需要监听的单一属性，并且逻辑相对独立的场景。

在setup函数中，props本身是响应式对象，但直接解构会失去响应性，因此需要使用getter函数形式进行监听。

JavaScript
import { watch } from "vue";

export default {
  props: {
    count: Number
  },
  setup(props) {
    watch(
      () => props.count,
      (newVal, oldVal) => {
        console.log("count变化：", newVal, oldVal);
      }
    );
  }
};

这种方式的优势在于清晰直观，适合单一属性监听。但当需要监听多个属性时，代码会逐渐变得冗长。

使用watch监听整个props对象

当组件依赖多个props字段，并且希望统一处理变化逻辑时，可以直接监听整个props对象。

JavaScript
import { watch } from "vue";

export default {
  props: {
    user: Object
  },
  setup(props) {
    watch(
      props,
      (newVal, oldVal) => {
        console.log("props发生变化", newVal);
      },
      { deep: true }
    );
  }
};

由于props是一个响应式代理对象，因此需要配合deep:true才能监听到内部属性变化。这种方式适合结构复杂的对象传递场景，比如用户信息、配置对象等。

不过需要注意，深度监听会带来一定的性能开销，尤其在大型组件中需要谨慎使用。

使用watchEffect实现自动依赖追踪

watchEffect是Vue3中更“自动化”的响应式监听方式，它会自动收集依赖，不需要显式指定监听字段。当函数内部访问props属性时，系统会自动追踪依赖变化。

JavaScript
import { watchEffect } from "vue";

export default {
  props: {
    title: String,
    count: Number
  },
  setup(props) {
    watchEffect(() => {
      console.log("title:", props.title);
      console.log("count:", props.count);
    });
  }
};

这种方式的优势在于代码简洁，适合多个props参与计算或联动逻辑的场景。但它也有一定隐式性，依赖关系不够直观，在复杂业务中可能降低可读性。

props解构后保持响应性的处理方式

在实际开发中，经常会出现解构props的情况，例如：

JavaScript
const { count } = props;

这种写法会导致响应性丢失，因此Vue3提供了toRefs进行优化。

JavaScript
import { toRefs, watch } from "vue";

export default {
  props: {
    count: Number
  },
  setup(props) {
    const { count } = toRefs(props);

    watch(count, (newVal) => {
      console.log("count变化：", newVal);
    });
  }
};