【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 进行处理时才会执行一次监听函数

相关推荐
s91236010115 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim33 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码37 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
姑苏洛言1 小时前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K1 小时前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_1 小时前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang1 小时前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧2 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.2 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html