【bug】在子组件中watch监听父组件传过来的值，监听不到，已解决

bug复现：

父组件需要传参数autoinputFs，autoinputFs为true的时候，子组件中的输入框（只有一个）自动聚焦，很多组件复用mp3Search，有些页面不需要，所以定义了autoinputFs控制输入框是否自动聚焦

<template>
  <div>
<mp3Search :autoinputFs="true">
    </mp3Search>
  </div>
</template>

子组件接受并监听

<el-input v-model="form.serchvalue" ref="myInput">
            <i class="el-icon-search" slot="suffix"> </i>
          </el-input>
 props: {
   
    autoinputFs: {
   
      type: Boolean,
      default: false,
    },
  },
watch: {
   
    autoinputFs: {
   
      handler(newVal) {
   
        console.log(newVal, "newVal");
        this.$nextTick(() => {
   
          this.$refs.myInput.focus();
        });
      },
  
    },
  },

watch中的console.log()始终无法触发

解决方法：加上 immediate: true，立即执行一次监听函数

解决代码：

watch: {
   
    autoinputFs: {
   
      handler(newVal) {
   
        console.log(newVal, "newVal");
        this.$nextTick(() => {
   
          this.$refs.myInput.focus();
        });
      },
  immediate: true, // 立即执行一次监听函数
    },
  },

解决的方法不难，但是我觉得更需要知道的是为什么会产生这个bug

在监听器watch初始化时，Vue 并不会主动触发watch监听函数，除非设置了 immediate

在 Vue 中，当一个组件被创建时，父组件向子组件传递的 props 会被初始化并建立响应式关系。这意味着，如果父组件传递给子组件的 prop 发生变化，Vue 会负责检测这些变化并触发相应的更新。

然而，在 watch 中直接监听一个 prop 时，并不会触发初始的监听函数。这是因为 Vue 在组件初始化阶段不会主动去检测 prop 的变化，Vue 在创建组件实例时会在数据响应式系统中设置 prop 的初始值，但是在组件挂载之前，Vue 并不会立即将 prop 中的变化反映到实例的数据中，也就是说，只要组件挂载之前 prop 没有发生变化，watch中是无法触发的

这是为了避免在组件初始化时过多的计算和处理，只有在确实需要在初始化时对 prop 进行处理时才会执行一次监听函数