关于使用props传值之后watch不能正常监听问题记录

最新推荐文章于 2024-06-29 12:20:39 发布

qq_43397696

最新推荐文章于 2024-06-29 12:20:39 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue javascript

本文链接：https://blog.youkuaiyun.com/qq_43397696/article/details/108004764

前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在Vue.js中使用v-if渲染组件并进行父子组件间对象传值时，遇到的watch监听不生效的问题。详细解析了如何通过设置deep和immediate属性来实现对象变化的深度监听，确保在模糊搜索等场景下能正确响应数据变动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做业务中，使用v-if进行渲染，使用了父子传值的方式传递一个对象，但是在模糊搜索中，watch没有正常的进行监听，原因就是因为监听的某些参数是通过对象获取的，watch没有进行深度监听导致。
解决方案：

 watch: {
    queryParam() {
      this.fetch();
    },
    deep: true,
    immediate: true
  },

总结：
在使用watch属性进行监听普通参数时

watch:{
 amzing(new,old){
 			console.log(new + lod)
	}
}

监听异步数据或者对象时；

watch:{
  b: {
      handler() {//只能写handler才能生效
        this.fetch();//异步调用数据
      },
      deep: true,//深度监听
      immediate: true//immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，
    }
}

ok了，就先写这么多。