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

相关推荐
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite