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

这是一个常见的面试题，考察对 Vue 响应式系统和 watch 选项的深入理解。

核心答案：

在 Vue 中，watch 默认不会在组件初始化时立即执行。如果希望在监听的数据初始化时就立即执行一次回调函数，可以通过设置 immediate: true 选项来实现。

---

一、使用 immediate: true（Vue 2 和 Vue 3 通用）

这是最直接、最常用的方式。

示例代码：

<script>
export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  watch: {
    // 监听 message 数据
    message: {
      handler(newVal, oldVal) {
        console.log('message 变化:', oldVal, '→', newVal)
        // 执行你的业务逻辑，如 API 请求
        this.fetchData(newVal)
      },
      immediate: true // 关键：组件创建时立即执行一次
    }
  },
  methods: {
    fetchData(query) {
      console.log('请求数据:', query)
      // 模拟 API 调用
    }
  }
}
</script>

✅ 效果：

• 组件创建时，message 的初始值 'Hello Vue' 会立即触发 handler。
• 后续 message 变化时，也会继续触发。

---

二、在 created 或 mounted 钩子中手动调用

如果不使用 immediate，也可以在组件初始化钩子中手动调用一次相同的逻辑。

<script>
export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  created() {
    // 手动触发一次，模拟 immediate 行为
    this.handleMessageChange(this.message)
  },
  watch: {
    message(newVal) {
      this.handleMessageChange(newVal)
    }
  },
  methods: {
    handleMessageChange(value) {
      console.log('处理消息:', value)
      this.fetchData(value)
    },
    fetchData(query) {
      console.log('请求数据:', query)
    }
  }
}
</script>

⚠️ 缺点：代码重复，维护性较差，不推荐。

---

三、在组合式 API（Vue 3）中使用 watch 的 immediate 选项

在 <script setup> 中，使用 watch 函数时同样支持 immediate。

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

const message = ref('Hello Vue')

// 使用 watch 函数
watch(
  () => message.value,
  (newVal, oldVal) => {
    console.log('message 变化:', oldVal, '→', newVal)
    fetchData(newVal)
  },
  { immediate: true } // 立即执行
)

function fetchData(query) {
  console.log('请求数据:', query)
}
</script>

---

四、使用 watchEffect（Vue 3 特有，自动立即执行）

watchEffect 会立即执行传入的函数，并自动追踪其依赖。

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

const message = ref('Hello Vue')

// watchEffect 会立即执行，并自动监听 message.value
watchEffect(() => {
  console.log('watchEffect: ', message.value)
  fetchData(message.value)
})

function fetchData(query) {
  console.log('请求数据:', query)
}
</script>

✅ 优点：简洁，自动追踪依赖。
⚠️ 注意：watchEffect 每次依赖变化都会执行，且无法获取 oldValue。

---

五、注意事项

1. immediate 的执行时机：
   • 在 created 钩子之后，mounted 之前执行。
   • 此时 DOM 可能还未挂载，避免在 handler 中操作 DOM（除非在 nextTick 中）。
2. deep: true 与 immediate 可同时使用
3. 性能考虑：
   • 避免在 immediate 的 handler 中执行昂贵操作，除非必要。

---

总结

方法	适用版本	是否立即执行	推荐指数
watch + immediate: true	Vue 2 / Vue 3	✅ 是	⭐⭐⭐⭐⭐
watchEffect	Vue 3	✅ 是（自动）	⭐⭐⭐⭐
手动在 created 中调用	Vue 2 / Vue 3	✅ 是	⭐⭐（不推荐）

✅ 最佳实践：
使用 watch 配置 immediate: true 是最清晰、最标准的方式，推荐在面试和实际开发中使用。