如何在Vue中仅监听一次属性变化，后续不再响应？

问题描述 #

组件初始化阶段需要针对某一属性的变化执行一次操作，后续该属性变化无需处理，当前使用hasInitialized标记的临时方案，询问是否有更优实现方式。

当前临时方案代码：

const Component = () => ({
  property: "",
  hasInitialized: false,
  init() {
    this.$watch("property", (value, oldValue) => {
      if (!this.hasInitialized) {
        // 执行操作
        this.hasInitialized = true;
      }
    });
  }
});

export default Component;

优化方案 #

方案1：利用$watch返回值手动取消监听 #

Vue的$watch方法会返回一个取消监听的函数，执行这个函数就能停止对该属性的监听，不需要额外维护状态标记。

示例代码：

const Component = () => ({
  property: "",
  init() {
    // 保存取消监听的函数
    const unwatch = this.$watch("property", (value, oldValue) => {
      // 执行需要的操作
      // 操作完成后立即取消监听
      unwatch();
    });
  }
});

export default Component;

这个方案逻辑更简洁，没有多余的状态变量，执行一次后自动停止监听。

方案2：初始化时直接处理（属性初始值明确场景） #

如果property的初始值确定，或者你不需要等待属性变化触发，只是想在初始化阶段基于该属性值执行一次操作，完全可以跳过$watch，直接在init钩子中处理：

const Component = () => ({
  property: "",
  init() {
    // 直接基于当前property的值执行操作
    // Go do something with this.property
  }
});

export default Component;

这种方式避免了监听开销，性能最优，但只适用于初始化阶段即可执行操作的场景。

方案3：使用once选项（Vue 3+） #

如果你使用Vue 3，watch API提供了once配置项，设置为true后监听只会触发一次，自动停止：

import { ref, watch } from 'vue';

const Component = {
  setup() {
    const property = ref("");
    // 开启一次性监听
    watch(property, (value, oldValue) => {
      // 执行操作
    }, { once: true });

    return { property };
  }
};

export default Component;

总结 #

• Vue 2项目优先选方案1，无额外状态，逻辑清晰；
• 初始化即可执行操作的场景选方案2，性能最优；
• Vue 3项目直接用方案3的once选项，语法更直观。

内容的提问来源于stack exchange，提问作者DNA