面试题：怎么在组件初始化时立即调用 Vue 的 watch 函数？

在 Vue 组件中，watch 监听器默认不会在组件初始化时立即执行，而是只有在监听的数据发生变化时才会触发。如果需要在组件初始化时立即调用 watch 函数，可以通过以下两种方式实现：

---

方法 1：在 created 或 mounted 钩子中手动调用

在组件的 created 或 mounted 生命周期钩子中，手动调用 watch 监听器的逻辑。

export default {
  data() {
    return {
      myData: 'initial value',
    };
  },
  watch: {
    myData(newVal, oldVal) {
      console.log('myData changed:', newVal, oldVal);
    },
  },
  created() {
    // 初始化时手动调用 watch 逻辑
    this.$watch('myData', this.myDataWatcher);
    this.myDataWatcher(this.myData, null); // 立即调用
  },
  methods: {
    myDataWatcher(newVal, oldVal) {
      console.log('myDataWatcher called:', newVal, oldVal);
    },
  },
};

---

方法 2：使用 watch 的 immediate 选项

Vue 的 watch 提供了一个 immediate 选项，设置为 true 时，监听器会在组件初始化时立即执行一次。

export default {
  data() {
    return {
      myData: 'initial value',
    };
  },
  watch: {
    myData: {
      handler(newVal, oldVal) {
        console.log('myData changed:', newVal, oldVal);
      },
      immediate: true, // 初始化时立即调用
    },
  },
};

---

方法 3：使用 computed 替代 watch

如果只是需要在初始化时获取某个值，可以考虑使用 computed 属性，因为 computed 会在组件初始化时自动计算。

export default {
  data() {
    return {
      myData: 'initial value',
    };
  },
  computed: {
    computedData() {
      console.log('computedData called:', this.myData);
      return this.myData; // 返回计算后的值
    },
  },
  created() {
    // 初始化时 computed 会自动执行
    console.log('computedData value:', this.computedData);
  },
};

---

总结

• 推荐方法：使用 watch 的 immediate 选项是最简洁的方式。
• 适用场景：
  • 如果需要在初始化时执行逻辑，同时监听数据变化，使用 immediate。
  • 如果只需要初始化时执行一次逻辑，可以使用 created 或 mounted 钩子。
  • 如果只是需要初始化时获取值，可以使用 computed。