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

bug复现:

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

bash 复制代码
<template>
  <div>
<mp3Search :autoinputFs="true">
    </mp3Search>
  </div>
</template>

子组件接受并监听

bash 复制代码
<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,立即执行一次监听函数

解决代码:

bash 复制代码
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 进行处理时才会执行一次监听函数

相关推荐
前端Hardy3 分钟前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy3 分钟前
HTML&CSS:不一样的开关效果
javascript·css·html
清灵xmf22 分钟前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
一棵树长得超出它自己24 分钟前
jmeter if控制器在loop控制器执行结束后执行
前端·jmeter
-代号95271 小时前
【JavaScript】十三、事件监听与事件类型
开发语言·javascript·ecmascript
阳树阳树2 小时前
signal-新的状态管理模式
前端·javascript
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
木木黄木木2 小时前
HTML5手写签名板项目实战教程
前端·html·html5
姑苏洛言3 小时前
基于微信小程序实现幸运大转盘页面
前端
前端极客探险家3 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法