关于watch监听的使用

最新推荐文章于 2024-05-14 11:19:39 发布
最新推荐文章于 2024-05-14 11:19:39 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： watch监听的使用 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xwyjw/article/details/120158378
版权

watch的使用

新手初次使用，如有问题请指出
我这里是监听的路由
1、watch的基本使用
先上代码
在这里插入图片描述

这个就是watch监听最基础的使用
2、使用immediate
当你使用最基本的方法时，你会发现在第一次进入页面时咱们的监听并没有发生作用，也就是咱们的值在第一次进行绑定时，他不会去监听，只有当咱们的值发生变化时才会进行执行，如果咱们需要第一次就触发执行此时就要用到immediate这个属性了，我们就需要给他添加这个属性同时也需要handler方法，由于本人是小白，写的较为简略

handler方法就是你watch中需要具体执行的方法；
在这里插入图片描述
3、deep属性
当咱们的监听是 对象或者是对象的属性时，就需要用到咱们的deep属性了，此时仍需要用到handler方法
此时就需要咱们把之前用到的immediate改成deep，
此时我理解的最简单的watch监听就写完了 如有错误还请大佬指出使我后期进行完善

xwyjw
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用watch监听路由变化和watch监听对象的实例
01-21
一、watch监听路由变化 解决办法： export default{ data(){ return{} }, watch:{ $route:getPath // 监听事件 }, methods:{ getPath(){ let path = this.$roune.path; //或得当前路径 进行逻辑判断 } } } 二、...
[vue] watch只监听一次
前端一线搬运工的博客
06-09 8412
export default { data: { isReady: false }, mounted() { const unwatch = this.$watch('isReady', function(newValue, oldValue){ console.log(newValue); unwatch() }); }, } 作者：Momo 链接：https://www.zhihu.com/question/414637440/answer/1414088153 来源：知乎 著作权归作者所有。商业转
watch监听器三种监听方式
LFQP_的博客
02-15 4538
watch监听器三种监听方式
watch监听对象的具体某个属性
最新发布
weixin_46394325的博客
05-14 469
watch监听对象的具体某个属性
怎么在 watch 监听开始之后立即被调用
m0_60823684的博客
11-07 593
设置 immediate 属性为 true let vm=new Vue({ el:"#first", data:{msg:'liuneng'}, watch:{ msg:{ handler (newMsg,oldMsg){ console.log(newMsg); }, immediate:tr
watch监听
qq_45837267的博客
03-29 2417
5、watch中不要使用箭头函数，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象。this.$route.path获取当前路由，用在监听里就是，当监听到路由的变化是，进行什么什么操作。6、watch的超强用法，watch可以监听到只要能通过this.访问的属性，比如面包屑里的监听使用。1、在vue中watch用来监听数据的变化，当数据变化时可以执行一些操作。2、第一次绑定watch时，不会执行监听函数，发生改变时才会触发监听。设置deep：true。
【vue3】watchEffect只监听一次的方法
bbt953的博客
02-15 4878
【vue3】watchEffect只监听一次的方法
Vue数据监听方法watch的使用
08-27
Vue数据监听方法watch的使用 Vue 数据监听方法 watch 的使用是 Vue 框架中的一种重要机制，它允许开发者监视数据的变化，并在数据变化时执行特定的操作。下面是对 watch 的使用方法的详细介绍。 watch 的基本使用 ...
微信小程序实现watch监听
10-15
需要注意的是，过度使用`watch`可能会导致性能下降，因此应谨慎使用，只在必要时才进行监听。同时，这种实现方式并不完美，可能无法覆盖所有Vue`watch`的特性，例如计算属性和异步处理，但足以满足大部分基础需求。...
小程序使用watch监听数据变化的方法详解
10-16
主要介绍了小程序使用watch监听数据变化的方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue watch监听对象及对应值的变化详解
11-26
a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听，可监听到对象、数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都...
Vue使用watch监听一个对象中的属性的实现方法
10-17
主要介绍了Vue使用watch监听一个对象中的属性的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中的watch监听数据变化及watch中各属性的详解
10-18
主要介绍了vue中的watch监听数据变化及watch中的immediate、handler和deep属性详解，本文大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
AngularJS中watch监听用法分析
10-21
主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
vue 子组件watch监听不到prop的解决
10-14
主要介绍了vue 子组件watch监听不到prop的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
watch 监听为什么是一次性的？
qq_33240556的博客
12-17 460
具体来说，当你在终端或控制台中运行 “watch” 命令时，它会在终端上定期地显示或执行某些命令，通常是以几秒或一分钟为间隔。监听器的行为会随着时间推移而发生改变，但在监视过程中发生的事件会导致触发操作的发生，但这些操作并非持续性，一旦监视结束后就不会再有反馈或交互。“watch” 监听通常是一次性的，是因为它主要用于在文件系统或网络协议上监视特定事件，并在这些事件发生时执行某些操作。总之，“watch” 监听器是一次性的，是因为它通常是在特定事件发生时触发特定的操作，而不是持续性的。
学习vue3系列watch
热门推荐
前端精髓
08-07 1万+
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。 <template> <button @click="change">count is: {{ state.count }}</button> </template> <script> import { reactive, watch } from 'vue' export default { setup () {
watch 绑定监听立即执行 / computed 计算属性传参 / router 传值
leaf的博客
04-27 933
最近公司需要一个新的中后台系统，打算使用一下新的UI组件 使用 Ant Design Vue ，直接使用了 Ant Design Vue Admin 。对于我这种刚入行一年的，看看大佬的代码，实现思路也是一种成长的方式。 总结一下新学到的知识和思路 问题描述： 在modal组件中放了一个组件，父组件传值给子组件，子组件使用watch监听，结果在每次是第一次打开弹窗的时候，watch并不能监听到参过去的参数变化。 解决方法 使用 $refs.xxx 去调用方法传值。 直接使用 Vue 官方提供的.
watch监听属性使用场景
01-13
watch属性在Vue中用于监听属性的变化，并在属性发生变化时执行相应的操作。它可以用于多种场景，包括但不限于...以上是watch属性的三种常见使用场景，根据具体需求选择相应的方式来监听属性的变化并执行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值